Как получить значение из поля выбора в HTML-таблице

#javascript

Вопрос:

Я пытаюсь получить значение из поля выбора в моей таблице HTML. Как я могу выбрать выбранное значение?

Что я пробовал до сих пор:

 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">

Выбранное значение из моего поля выбора в моей таблице HTML

1. Вы пробовали .value ?

2. @freefaller Да, я сделал, это возвращает undefined

3. Вы получаете элементы с идентификаторами «id» и «select» можете ли вы включить соответствующий html

4. @R3tep Конечно! Это всего лишь 2 поля ввода, где я могу видеть, что возвращает javascript

Ответ №1:

Как я могу выбрать выбранное значение?

Вы можете получить выбранный индекс с помощью метода HTMLSelectElement.selectedIndex

Но если я понимаю вашу проблему. Вы пытаетесь получить текущие значения вашего выбора. Итак, вам нужно получить значение выбранных вами параметров.

Вы можете сделать это следующим образом:

 document.getElementById('mySelect').onchange = function() {
  let options = this amp;amp; 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>

Реализация в вашем примере кода

 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 amp;amp; 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);
  }
}

Ответ №2:

так просто…

 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>

Ответ №3:

Добро пожаловать в Stack Overflow!

Итак, у вас <select> есть класс selectpicker . Мы можем использовать это для выбора вашего <select> !

Попробуйте следующее, чтобы получить свое значение:

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

Или, если у вас их несколько <select> , вы можете использовать

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

Надеюсь, это немного прояснит ситуацию.