如何使用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 () {

    // get the selected option

    var value = select.options[select.selectedIndex].value

}

// get all options:

for ( int i = 0; i < select.options.length; i++ ) {

    console.log( select.options[i].value )

}

这应该会让您了解如何继续。

Answer 2

使用onchange事件。

<select  id="pbvalue" tabindex="4" onchange="dodo(event)">

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

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

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

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

             

</select>

<script>

      

          function dodo(e){

           switch(e.target.value){

               case "1":

                  alert(1);//do what ever you want

                  break;

               case "2":

                  alert(2);

                  break;

               case "3":

                  alert(3);

                  break;

               default:

                  alert("default");

                  break;

   

           }

       

         }

 

</script>

Answer 3

您可以在元素上添加onChange事件select。

<script>

    

    function onSelectChange() {

      const element = document.getElementById('pbvalue');

      console.log('Selected Index: ', element.selectedIndex);

      console.log('Selected Value: ', element.value);

    

    }

    

 </script>

    

    

 <select  id="pbvalue" tabindex="4" onchange="onSelectChange()">

    

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

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

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

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

                 

    

 </select>