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

Need to create onChange/onSelect with javascript for dropdown list

本文关键字：onSelect 下拉列表 onChange 创建 javascript      更新时间：2023-09-26

我不知道如何在javascript中创建更改/取消选择函数，如果你能帮助我，我将不胜感激。

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

检查这个fiddle，因为您也标记为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);
} );

试试这个：

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>

相关文章：