how to access value of drop down boxes in specific cells in a table?

Hi, I'm having trouble with trying to access a selected value of a drop down menu in a table. I have menus in columns 3 and 4, named cred and grade respectively, from rows 2 onwards, and I'm using a function to access them. How do I access the value's for manipulating other variables?

Here is what I have so far:


function f(tableID){
var len = document.getElementById(tableID).rows.length;

for(var i = 1; i<len; i++){
var c = document.getElementById(tableID).rows[i].cells[2].childNodes[0];
credits = c.options[c.selectedIndex].text;
}
}


Your help would be really appreciated :)

Did you try this?

theValue = c.value;

yeah, if I see the value by using alert it comes up as undefined :S

Please show us the underlying HTML structure of the respective select

function f(tableID){
var len = document.getElementById(tableID).rows.length;

for(var i = 1; i<len; i++){
var c = document.getElementById(tableID).rows[i].cells[2].childNodes[0];
credits = c.options[c.selectedIndex].text;
}
}

You can't rely on childNodes[0] referring to the first tag inside the cell.

Assuming that your addressing is correct, you could try: cells[ 2 ].getElementsByTagName( 'select' )[0];

Thanks. I'm now able to get the value of the drop down menu in the first row, but I still can't get them for the other rows, all the values that go into my array duplicate the first row. My values for the first dropdown menu arguments[2] are "10" and "20" so if I wanted my array to be [10,20] it would be [10,10].

I'm passing in my selects' id's to the function as the 3rd and 4th arguments => arguments[2] & arguments[3].

My new code is:


var len = document.getElementById(arguments[1]).rows.length;
var cMenus = [];
var gMenus= [];
var a = 0;
for(var j = 1; j<len; j++){
for(var i = 2; i<arguments.length; i++){
var c = document.getElementById(arguments[2]);
var g = document.getElementById(arguments[3]);

cMenus[a] = c.options[c.selectedIndex].value;
gMenus[a] = g.options[g.selectedIndex].value;

}
a++;
}

var c = document.getElementById(arguments[2]);
var g = document.getElementById(arguments[3]);

This indexing is fixed, so will always reference the same element.

well there are only 4 arguments and the last 2 reference the name of the select. dunno how to get these selects for the other rows

I have updated my question using another thread as I was unable to edit or delete this one