How to access the selected option inside a table in JS-CodePudding

I have a HTML Table, where every third column has a select inside.

Col2 has a select tag inside with options 'Random', 'blank' and 'red'. Now I want to iterate through all those selects in vanilla JS and get the selected value. Here is my JS code so far - The problem is that col.selectedIndex; returns undefined. How can i access the select inside a table?

var but_table = document.getElementById("button_table");
for (var i = 1, row; row = but_table.rows[i]; i  ) {
  for (var j = 0, col; col = row.cells[j]; j  ) {
    if (j == 2) {
      console.log(col.selectedIndex);
    }
  }
}

<table  id="button_table" onm ouseover="">
  <thead>
    <tr>
      <th>Col0</th>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
    <tr>
      <td> <input type="text" value="undefined"> </td>
      <td>1 2 3 4</td>
      <td>
        <select name="color_select" id="color_select">
          <option>Random</option>
          <option>blank</option>
          <option>red</option>
        </select>
      </td>
      <td><input type="checkbox" id="fade_cb" name="fade_cb" onchange=""></td>
      <td>
        test
      </td>
    </tr>
    <tr>
      <td> <input type="text" value="undefined"> </td>
      <td>1 2 3 4</td>
      <td>
        <select name="color_select" id="color_select">
          <option>Random</option>
          <option>blank</option>
          <option>red</option>
        </select>
      </td>
      <td><input type="checkbox" id="fade_cb" name="fade_cb" onchange=""></td>
      <td>
        test
      </td>
    </tr>
  </thead>
</table>

CodePudding user response：

To get it working with the code that you were already working on, you could do it like the following:

for (var i = 1, row; row = but_table.rows[i]; i  ) {
    for (var j = 0, col; col = row.cells[j]; j  ) {
        if (j == 2) {
            var select = col.children[0];
            console.log(select.options[select.selectedIndex].text);
        }
    }
}

The select dropdown is the first child element in the td cell/col. Thats why you need to select the first child element with col.children[0]

CodePudding user response：

You are not targeting the select but the cell it is in

You can use querySelectorAll which is much simpler

I wrapped the relevant table part in a tbody for you

const sels = document.querySelectorAll("#button_table tbody tr td:nth-child(3) select");
const indicii = [...sels].map(sel => sel.selectedIndex)
console.log(indicii);

<table  id="button_table" onm ouseover="">
  <thead>
    <tr>
      <th>Col0</th>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> <input type="text" value="undefined"> </td>
      <td>1 2 3 4</td>
      <td>
        <select name="color_select" id="color_select">
          <option>Random</option>
          <option selected>blank</option>
          <option>red</option>
        </select>
      </td>
      <td><input type="checkbox" id="fade_cb" name="fade_cb" onchange=""></td>
      <td>
        test
      </td>
    </tr>
    <tr>
      <td> <input type="text" value="undefined"> </td>
      <td>1 2 3 4</td>
      <td>
        <select name="color_select" id="color_select">
          <option>Random</option>
          <option>blank</option>
          <option selected>red</option>
        </select>
      </td>
      <td><input type="checkbox" id="fade_cb" name="fade_cb" onchange=""></td>
      <td>
        test
      </td>
    </tr>
  </tbody>
</table>