javascript - 如何访问表格单元格中下拉列表的值

Question

我有一个 HTML 表格，单元格中有一些下拉菜单。我想像下面尝试的那样访问下拉菜单的选项。我怎样才能做到这一点？我的 JavaScript 似乎不起作用。

<table id = "xy">
    <tr>
      <td>
        <select>
          <option>--Please Select--</option>
          <option>value 1</option>
          <option>value 2</option>
          <option>value 3</option>
       </select>
      </td>
    </tr>
    <tr>
     <td>
       <select>
          <option>--Please Select--</option>
          <option>value 1</option>
          <option>value 2</option>
          <option>value 3</option>
      </select>
     </td>
    </tr>
    </table>

    <script type="text/javascript">
        ...
        var table = document.getElementById("xy");

        for (var i = 0, row; row = table.rows[i]; i++) {
             alert(row.cells[0].innerHTML.options[0].value);
             alert(row.cells[1].innerHTML.options[0].value);
        }
        ...
    </script>

Answer 1

获取表中所有的tr元素:

var selects = document.querySelectorAll('#xy tr');

然后读取每一行中每个select的value:

    var rows = document.querySelectorAll('#xy tr');
    for (var i = 0; i < rows.length; i++) { //iterate over rows
        var selects = rows[i].querySelectorAll('select');
        for (var j = 0; j < selects.length; j++) { //iterate over selects in a row
            console.log('Row number: ' + i);
            console.log(selects[j].value);
        }
    }

示例:

function readValues() {
    var rows = document.querySelectorAll('#xy tr');
    for (var i = 0; i < rows.length; i++) {
        var selects = rows[i].querySelectorAll('select');
        for (var j = 0; j < selects.length; j++) {
            console.log('Row number: ' + i);
            console.log(selects[j].value);
        }
    }
}

<table id = "xy">
    <tr>
      <td>
        <select>
          <option>--Please Select--</option>
          <option>value 1</option>
          <option>value 2</option>
          <option>value 3</option>
       </select>
      </td>
      <td>
       <select>
          <option>--Please Select--</option>
          <option>value 1</option>
          <option>value 2</option>
          <option>value 3</option>
      </select>
     </td>
    </tr>
    <tr>
     <td>
       <select>
          <option>--Please Select--</option>
          <option>value 1</option>
          <option>value 2</option>
          <option>value 3</option>
      </select>
     </td>
      <td>
       <select>
          <option>--Please Select--</option>
          <option>value 1</option>
          <option>value 2</option>
          <option>value 3</option>
      </select>
     </td>
    </tr>
  </table>
  <button onclick="readValues()">Read values</button>