如何使用javascript选择选择元素内的选项

Question

所以我有一个带有四个选项的选择元素。

我想选择不同的选项，以便可以触发不同的功能，但 onclick 方法不起作用。

let select = document.getElementById('pbvalue');

select.addEventListener('click', dodo);

function dodo(e) {

  if (e.target.value == 1) {

    alert('hi')

  } else {

    alert('no')

  }

}

<select id="pbvalue" tabindex="4">

  <option value="0">""</option>

  <option value="1">100</option>

  <option value="2">200</option>

  <option value="3">300</option>

</select>

如何选择不同的选项，以便根据该选项触发不同的功能。

Answer 1

做这个：let select = document.getElementById('pbvalue');select.onchange = function () {&nbsp; &nbsp; // get the selected option&nbsp; &nbsp; var value = select.options[select.selectedIndex].value}// get all options:for ( int i = 0; i < select.options.length; i++ ) {&nbsp; &nbsp; console.log( select.options[i].value )}这应该会让您了解如何继续。

Answer 2

使用onchange事件。<select&nbsp; id="pbvalue" tabindex="4" onchange="dodo(event)">&nbsp; &nbsp; &nbsp; <option value="0" disabled>choose</option>&nbsp; &nbsp; &nbsp; <option value="1">100</option>&nbsp; &nbsp; &nbsp; <option value="2">200</option>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <option value="3">300</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</select><script>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function dodo(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;switch(e.target.value){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;case "1":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(1);//do what ever you want&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;case "2":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;case "3":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(3);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("default");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp;</script>

Answer 3

您可以在元素上添加onChange事件select。<script>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; function onSelectChange() {&nbsp; &nbsp; &nbsp; const element = document.getElementById('pbvalue');&nbsp; &nbsp; &nbsp; console.log('Selected Index: ', element.selectedIndex);&nbsp; &nbsp; &nbsp; console.log('Selected Value: ', element.value);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;</script>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<select&nbsp; id="pbvalue" tabindex="4" onchange="onSelectChange()">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="0">""</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">100</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">200</option>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">300</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</select>