javascript - 需要使用 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

检查这个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);

} );