需要使用JavaScript創建onChange / onSelect以獲得下拉列表

Question

我無法弄清楚如果可以幫助我，如何在javascript中創建on change / onselect函數將不勝感激。

<div class="subdivision half">
    <select id="cabin" name "cabin" required tabindex="4">
             <option value="executive">Executive</option>
             <option value="sport">Sport</option>
             <option value="suv">SUV</option>
             <option value="standard">Standard</option>**strong text**
        </select>
     </div>
<div class="subdivision half">
     <select id="car" name="car" required tabindex="5">
         <option value="mercedes-benz s400" class="executive">Mercedes Benz S400</option>
         <option value="mercedes-benz s500" class="executive">Mercedes Benz S500</option>
         <option value="bentleyflyingspur" class="executive">Bentley Flying Spur</option>
         <option value="ferrari458" class="sport">Ferrari Italia 458</option>
         <option value="ferrari488" class="sport">Ferrari Italia 488</option>
         <option value="lambohuracain" class="sport">Lamborghini Huracain</option>
         <option value="lamboaventador" class="sport">Lamborghini Aventador</option>
      </select>
   </div>

Answer 1

嘗試這個：

使用Javascript

 function registerEvent(){ document.getElementById("cabin").onchange = change; document.getElementById("car").onchange = change; } function change(){ console.log("Element: ", this); } registerEvent(); 

 <div class="subdivision half"> <select id="cabin" name "cabin" required tabindex="4"> <option value="executive">Executive</option> <option value="sport">Sport</option> <option value="suv">SUV</option> <option value="standard">Standard</option>**strong text** </select> </div> <div class="subdivision half"> <select id="car" name="car" required tabindex="5"> <option value="mercedes-benz s400" class="executive">Mercedes Benz S400</option> <option value="mercedes-benz s500" class="executive">Mercedes Benz S500</option> <option value="bentleyflyingspur" class="executive">Bentley Flying Spur</option> <option value="ferrari458" class="sport">Ferrari Italia 458</option> <option value="ferrari488" class="sport">Ferrari Italia 488</option> <option value="lambohuracain" class="sport">Lamborghini Huracain</option> <option value="lamboaventador" class="sport">Lamborghini Aventador</option> </select> </div> 

jQuery-依賴選擇

 function registerEvents() { $("#cabin").on("change", function() { var selectedValue = $(this, "option:selected").val(); console.log(selectedValue); $("#car option").hide(); $("#car option").first().show(); // show available options if(selectedValue.length>0) $("#car ." + selectedValue.toLowerCase()).show(); else $("#car option").show(); }); $("#car").on("change", function() { console.log($(this)); }) } registerEvents(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="subdivision half"> <select id="cabin" name "cabin" required tabindex="4"> <option value="">Selected Type</option> <option value="executive">Executive</option> <option value="sport">Sport</option> <option value="suv">SUV</option> <option value="standard">Standard</option>**strong text** </select> </div> <div class="subdivision half"> <select id="car" name="car" required tabindex="5"> <option value="">Selected Car</option> <option value="mercedes-benz s400" class="executive">Mercedes Benz S400</option> <option value="mercedes-benz s500" class="executive">Mercedes Benz S500</option> <option value="bentleyflyingspur" class="executive">Bentley Flying Spur</option> <option value="ferrari458" class="sport">Ferrari Italia 458</option> <option value="ferrari488" class="sport">Ferrari Italia 488</option> <option value="lambohuracain" class="sport">Lamborghini Huracain</option> <option value="lamboaventador" class="sport">Lamborghini Aventador</option> </select> </div> 

Answer 2

檢查這個小提琴，因為您也已標記為jquery。 這是捕獲onchange事件的方式

$( "#cabin" ).change( function(){

    alert( $( this ).val() );

} );

檢查此更新的小提琴以了解您的更新要求

$( "#cabin" ).change( function(){

  var selectionClassValue = $( "#cabin" ).val();
  $( "#car" ).val( "" );
  $( "#car" ).find( "option" ).hide();
  $( "#car" ).find( "option" ).removeClass( "visible" );
  $( "#car" ).find( "option." + selectionClassValue ).show();
  $( "#car" ).find( "option." + selectionClassValue ).addClass( "visible" );
  $( "#car option.visible" ).first().prop('selected', true);

} );