Javascript 层叠选择：选择特定选项时显示不同的选项

当用户选择特定选项时，我需要显示一些选项。我想对name=“products”隐藏一些选项，例如过滤器：

<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的帮助。

我建议将第二个

select

中的

id

更改为

class

，因为id必须是唯一的，然后您可以捕获第一个

select

的

更改事件

，并仅显示与值匹配的选项，如下所示：

更新的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>

---

谢谢你的迅速回复！这与im搜索类似，但当页面加载时，会显示所有name=“product”选项。。。我怎样才能解决这个问题。。。非常感谢您的回答…那么您希望页面加载的效果如何？没什么可看的？

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