How get selected option from a select field inside a table javascript

Question

I have a dynamically generated table where I can add rows like

function addNewRow() {
  var table = document.getElementById("employee-table");
  var rowCount = table.rows.length;
  var cellCount = table.rows[0].cells.length;
  var row = table.insertRow(rowCount);
  row.setAttribute("id", "line-" + count_row.toString());
  for (var i = 0; i < cellCount; i++) {
    var cell = row.insertCell(i);
    if (i == 0) {
      cell.innerHTML =
        '<select class="form-select" aria-label="Default select example">' +
        "<option selected>Open this select menu</option>" +
        '<option value="\x80\x80\x80\x80\x80\x80">Pausa</option>' +
        '<option value="\x80\x90\x80\x80\x80\x80">Altezza+</option>' +
        '<option value="\x90\x80\x80\x80\x80\x80">Altezza-</option>' +
        "</select>";
    } else if (i < cellCount - 2) {
      cell.innerHTML = '<input type="number" class="form-control" />';
    } else if (i < cellCount - 1) {
      cell.innerHTML =
        '<button value="delete" onclick="deleteRow(this)" type="button" class="btn btn-outline-danger">' +
        '<i class="bi bi-x-circle"></i>' +
        "</svg></button> ";
    } else {
      cell.innerHTML =
        '<span class="input-group-text"><i class="handle"><i class="bi bi-grip-horizontal"></i></i></span> ';
      cell.className = "handle";
    }
  }
  count_row++;
  // load_js();
}

every row has its unique ID

Now, I would like to access the currently selected option inside the select form in the first column in a javascript function when a button is clicked

is there a way to do it in javascript?

I'm using bootstrap and I'm seeing that selecting different options, the selected tag doesn't change in the HTML so I can't understand how to get the actual selected one if nothing changes

_"Now, I would like to access"_ - from where, and when? // `table.rows[...].cells[...]` can be used to access a specific cell by its row and column index. What more do you need? — CBroe, Jun 20 '23 at 10:38
What you're looking for is Event Delegation. The answer to this question should help you on your way: https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript — icecub, Jun 20 '23 at 10:41
Getting the selected option shouldn't be too hard? Just do `selectElement.options[selectElement.selectedIndex].value` or use `.text` instead value if you want the selected text — icecub, Jun 20 '23 at 10:45
@icecub `selectElement.value` is the same as `selectElement.options[selectElement.selectedIndex].value` — mplungjan, Jun 20 '23 at 10:46
@mplungjan Right, didn't consider that, my bad. No, you don't need a unique id for each select element. You can just make a general "on select change" event that will trigger regardless of which select is being changed. Then just use the event target to figure out which one was changed and do whatever you want with it. — icecub, Jun 20 '23 at 10:48
Why are you adding the cells in such a complicated way? It is really hard to grasp. Since you are using innerHTML anyway, you could easily use template literals or just clone a row — mplungjan, Jun 20 '23 at 10:48
`document.querySelector("table #line-1").value` will give you the selected option. — Aniket Pandey, Jun 20 '23 at 10:48

score 0 · Accepted Answer · answered Jun 20 '23 at 11:05

Here is how to add using clone and to delete and get using delegation

const table = document.getElementById("employee-table");
document.getElementById("add").addEventListener("click", () => {
  const row = table.firstElementChild.cloneNode(true);
  row.querySelector("select").value = "";
  row.querySelector("input").value = "";
  row.querySelector(".delete").hidden = false;
  table.appendChild(row);
});
table.addEventListener("click", (e) => {
  const tgt = e.target.closest("button.delete");
  if (!tgt) return; // not a delete button
  if (table.children.length > 1) tgt.closest("tr").remove()
});
table.addEventListener("change", (e) => {
  const tgt = e.target.closest(".form-select");
  if (!tgt) return; // not a select
  console.log(tgt.value);
});
document.getElementById("get").addEventListener("click", () => {
  const vals = [...table.querySelectorAll(".form-select")].map(sel => sel.value);
  console.log(vals)
})

<button type="button" id="add">Add</button>
<button type="button" id="get">Get</button>
<table>
  <tbody id="employee-table">
    <tr>
      <td>
        <select class="form-select" aria-label="Default select example">
          <option value="" selected>Open this select menu</option>
          <option value="\x80\x80\x80\x80\x80\x80">Pausa</option>
          <option value="\x80\x90\x80\x80\x80\x80">Altezza+</option>
          <option value="\x90\x80\x80\x80\x80\x80">Altezza-</option>
        </select>
      </td>
      <td><input type="number" class="form-control" /></td>
      <td>
        <button type="button" class="btn btn-outline-danger delete" hidden>
        <i class="bi bi-x-circle">Delete</i>
        </button>
      </td>
      <td class="handle">
        <span class="input-group-text">
      <i class="bi bi-grip-horizontal"></i>
    </span>
      </td>
    </tr>
  </tbody>
</table>

How get selected option from a select field inside a table javascript

1 Answers1