級聯選擇：選擇特定選項時顯示不同選項

Question

當用戶選擇特定選項時，我需要顯示一些選項。我想隱藏名稱=「產品」一些選項，就像一個過濾器：

<select name="category"> 
    <option value="fruit">fruits</option> 
    <option value="meal">meals</option> 
    <option value="drink">drinks</option> 
</select> 

<select name="products"><!--Always visible--> 
    <option default selected>select an option</option><!--when fruit is selected--> 
    <option id="fruit" value="apple">apple</option> 
    <option id="fruit" value="orange">orange</option><!--when meal is selected--> 
    <option id="meal" value="chicken">chicken</option> 
    <option id="meal" value="beef">beef</option><!--when drink is selected--> 
    <option id="drink" value="vodka">vodka</option> 
    <option id="drink" value="wishkey">wishkey</option> 
</select> 

我需要如何使用JavaScript或jQuery的做到這一點的幫助。

Answer 1

我建議在第二select改變id到class因爲ID必須是唯一的，然後你可以捕捉第一select的change event並只顯示那些符合如下值的選項：

DEMO

更新的HTML

<select name="category"> 
    <option value="fruit">fruits</option> 
    <option value="meal">meals</option> 
    <option value="drink">drinks</option> 
</select> 
<select name="products"> 
    <!--Always visible--> 
    <option selected>select an option</option> 
    <!--when fruit is selected--> 
    <option class="fruit" value="apple">apple</option> 
    <option class="fruit" value="orange">orange</option> 
    <!--when meal is selected--> 
    <option class="meal" value="chicken">chicken</option> 
    <option class="meal" value="beef">beef</option> 
    <!--when drink is selected--> 
    <option class="drink" value="vodka">vodka</option> 
    <option class="drink" value="wishkey">wishkey</option> 
</select> 

JS

$("select[name='category']").on('change',function(){ 
    var value=$(this).val(); //get the selected value 
    $('select[name="products"]').find('option:not(:first)').hide(); //hide all options except first 
    $('select[name="products"]').find('option.'+value+'').show();//show only matching options 
});