如何从html表格中的选择框获取值

Question

I'm trying to retrieve a value from a select box in my HTML table. How can I select the selected value?

What I've tried so far:

this.cells[14].innerHTML; 
this.cells[14].children[0].innerhtml; 
this.cells[14].children[0].innerText; 

The last one .innerText returns all the items in my select box......

var table2 = document.getElementById('table_items_program');

        for (var i2 = 1; i2 < table2.rows.length; i2++) {
            table2.rows[i2].onclick = function () {
                document.getElementById("id").value = this.cells[0].innerHTML;
                document.getElementById("select").value = this.cells[14].children[0].innerText;
            }
        }

<td><select class="selectpicker" multiple>
<?php while ($row9 = mysqli_fetch_assoc($result9)):; ?>
      <option value="<?php echo $row9['id']; ?>"><?php echo $row9['id'];?>                  
      </option> 
<?php endwhile; ?>                   
</select></td>

<input style="display: inline" id="id" name="id">
<input style="display: inline" id="select" name="select">

The selected value from my selection box in my HTML table

Answer 1

How can I select the selected value?

You can get the selected index with the method HTMLSelectElement.selectedIndex

---

But if I understand your trouble. You try to get the current values of your select. So you need to get the value of your selected options.

You can do it like:

 document.getElementById('mySelect').onchange = function() { let options = this && this.options; let selectedValues = [] for (var i = options.length; i--;) { let opt = options[i]; if (opt.selected) { selectedValues.push(opt.value || opt.text); } } console.log(selectedValues) }

 <select id="mySelect" multiple> <option value="a"> a </option> <option value="b"> b </option> <option value="c"> c </option> </select>

---

Implementation into your code example

for (var i2 = 1; i2 < table2.rows.length; i2++) {
  table2.rows[i2].onclick = function() {
    document.getElementById("id").value = this.cells[0].innerHTML;

    var options = this && this.cells[14].children[0].options;
    var selectedValues = []
    for (var i = options.length; i--;) {
      var opt = options[i];
      if (opt.selected) {
        selectedValues.push(opt.value || opt.text);
      }
    }
    document.getElementById("select").value = JSON.stringify(selectedValues);
  }
}

Answer 2

Welcome to Stack Overflow!

So, your <select> has the class selectpicker . We can use this to select your <select> !

Try the following to get your value:

document.querySelector(".selectpicker").value;

Or, if you have multiple <select> 's, you can use

[...document.querySelectorAll(".selectpicker")].forEach(opt => {
   console.log(opt.value)
});

Hope that clears things up a little.

Answer 3

so simple...

 ShowSelected.onclick = function() { console.clear() document.querySelectorAll('.selectpicker option:checked').forEach(opt=>console.log(opt.value)) }

 .selectpicker { vertical-align: text-top; }

 choose one or more: <select class="selectpicker" multiple size=6 > <option value="a"> A element</option> <option value="b"> B element</option> <option value="c"> C element</option> <option value="d"> D element</option> <option value="e"> E element</option> <option value="f"> F element</option> </select> <button id="ShowSelected"> Show Selected</button>