从表格单元格内的下拉列表中获取所选值

Question

I have a HTML table as follows. I want retrieve row values from this table. For retrieving table row values I have written this java script but i'm getting value null for this variable, var score = comrow.cells[2].childNodes[0].selectedIndex;

how can I correctly retrieve selected values of the drop down list?

function adddata(tableID){

  var phraseTable = document.getElementById(tableID);
        var phrrowCount = phraseTable.rows.length;


        for(var i=0; i<phrrowCount; i++) {
            var comrow = phraseTable.rows[i];
           // var comchkbox = comrow.cells[0].childNodes[0];
            var comval= comrow.cells[1].childNodes[0].value;
            var score = comrow.cells[2].childNodes[0].selectedIndex;
           } 
}

<TABLE id="dataTable" name="topkphrase" cellpadding="0" cellspacing="0" border="1">


            <tbody>
                    <TD width="5%"><INPUT type="checkbox" name="chk"/> </TD>
                    <TD width="75%"><input type="text" name="txt" value="" size="100%"/></TD>
                    <TD width="20%">
                        <SELECT name="score">

                            <OPTION value="vimp">V.Important</OPTION>
                            <OPTION value="imp">Important</OPTION>
                            <OPTION value="avr">Average</OPTION>

                        </SELECT>
                    </TD>
            </tbody>
        </TABLE>

Answer 1

Instead of trying to find the <select> object from the table, you can give the <select> a id and use getElementById.

var selectElement = document.getElementById(selectID);
console.log(selectElement.value);
console.log(selectElement.selectedIndex);

You could also use getElementByName to find all select statements with the name "score".

var selectElement = document.getElementByName("score")[0];
console.log(selectElement.value);
console.log(selectElement.selectedIndex);

You may also want to look into JQuery for doing this as it may make things much easier for you.