How to iterate multiple drop-down lists and access their option values

Question

I am writing code for a basic GPA calculator. In principle, this is a table with three columns, two text areas for the name of the course / credit hours and a drop-down list that contains letter ratings (A +, C, B-) and their corresponding point values ​​as a parameter value, for example this

<td><select name="letterGrades">
<option value="0.7">A+</option>>
<option value="1.3">A-</option>>
<option value="2.7">C+</option>
</option>
</select>
</td>

I need to iterate through the rows, get the parameter value or "class" for each course.

var table = document.getElementById(tableID);

for(var i=0; i<rowCount; i++) {

 grade = table.rows[i].cells[2].options[letterGrades.selectedIndex].id; //is this allowed?
 credits = parseFloat(table.rows[i].cells[1].value);
 totalHours += parseFloat(table.rows[i].cells[1].value);  
 perCourse += grade*credits

 } 

totalGPA = perCourse/totalHours;

I understand that there are other ways to assign letters to their point values ​​(arrays?), But I still don't know how to iterate through the drop-down lists and get their parameter values.

Answer 1

<select>. , document.getElementsByTagName('select'), <select> . , <select>, theSelectTag.getElementsByTagName('option') ( theSelectTag - node). value (ya rly) textContent.

getElementsByTagName NodeList, , Array.

Answer 2

- , . .

var select = document.getElementsByTagName('select');
var options = document.getElementsByTagName('option');
var textarea = document.getElementsByTagName('textarea');

for(var i=1; i<rowCount; i++) {  //i=1, starts at the second row, assuming you have a header
    var grades = select[i].options[select[i].options.selectedIndex].value; //gets the selected item for each select tag from the dropdownlist
    credits = parseFloat(textarea[i].value); //same goes for textareas
    totalHours += parseFloat(textarea[i].value);            
    perCourse += grades*credits;    
}       
totalGPA = perCourse/totalHours;