如何讓一個下拉列表的選項決定另一個下拉列表中的可用選項？

Question

它最初起作用，但選擇所有的選擇，而不是適當的選擇。我的jQuery一次選擇棒球和橄欖球選項值。有人可以幫我修復它嗎？

HTML

<div class="formControl"> 
    <label>Sport</label> 
    <select id="sport"> 
     <option value="">--Select--</option> 
     <option value="football">Football</option> 
     <option value="baseball">Baseball</option> 
    </select> 
</div> 
<div class="formControl"> 
    <label>Equipment</label> 
    <select id="equipment"> 
     <option value=""></option> 
     <option value="football">Helmet</option> 
     <option value="football">Pads</option> 
     <option value="baseball">Bat</option> 
     <option value="baseball">Gloves</option> 
    </select> 
</div> 

jQuery的

這樣做將有2名不同的 <select>列表和顯示激活一個

$("#sport").change(function(){ 
    $("#equipment").val($(this).val()); 
}); 

Answer 1

的一種方式。

Demo

HTML

<div class="formControl"> 
    <label>Sport</label> 
    <select id="sport"> 
     <option value="">--Select--</option> 
     <option value="football">Football</option> 
     <option value="baseball">Baseball</option> 
    </select> 
</div> 
<div class="formControl"> 
    <div id="football" class="equipment"> 
     <label>Equipment</label> 
     <select id="football-equipment"> 
      <option value=""></option> 
      <option value="football">Helmet</option> 
      <option value="football">Pads</option> 
     </select> 
    </div> 
    <div id="baseball" class="equipment"> 
     <label>Equipment</label> 
     <select id="baseball-equipment"> 
      <option value=""></option> 
      <option value="baseball">Bat</option> 
      <option value="baseball">Gloves</option> 
     </select> 
    </div> 
</div> 

jQuery的

$(function() { 
    $('.equipment').hide(); 
}); 

$("#sport").change(function() { 
    var val = $(this).val(); 
    $('.equipment').hide(); 
    $('#' + val).show(); 
});