如何在 select 元素中使用 javascript 中的 select 选项

Question

So I have a select element with four options.

I want to select different options so that different functions can fire, but the onclick method is not working.

 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>

how to select different options, so different functions can fire according to that.

Answer 1

Do this:

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

This should give you an idea of how to proceed.

Answer 2

use onchange event.

<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

You can add onChange event on the select element.

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