需要使用javascript为下拉列表创建onChange / onSelect

Question

如果你能帮助我，我无法弄清楚如何在javascript中创建更改/ 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

＆＃13;

＆＃13;

function registerEvent(){
  document.getElementById("cabin").onchange = change;
  document.getElementById("car").onchange = change;
}

function change(){
  console.log("Element: ", this);
}

registerEvent();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jQuery - 使用依赖选择

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查此fiddle，因为您也标记为jquery。这是捕获onchange事件的方法

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

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

} );

检查此更新的fiddle以了解您的更新要求

$( "#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);

} );