jQuery：根据主要类别中的选择获取子类别

Question

我在根据从主类别中选择的内容选择子类别时遇到了挑战，当我从主类别中进行选择时，子类别仍然显示第二类别中的所有选项。 这是代码片段

 $(document).ready(function(){ $("#category").on("change",function(){ var selectedVal=$( "#category option:selected" ).val(); $("#subcategory > optgroup").attr("disabled","disabled"); $('#subcategory > optgroup[label="'+selectedVal+'"]').removeAttr("disabled"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="category"> <option value="Fashion">Fashion</option> <option value="Electronics">Electronics</option> </select> <select name="subcategory" id="subcategory"> <optgroup label="Fashion"> <option value="Men's wear">Men's wear</option> <option value="Women's wear">Women's wear</option> </optgroup> <optgroup id="B" label="Electronics" disabled> <option value="Television">Television</option> <option value="Game Console">Game Console</option> </optgroup> </select> 

Answer 1

将选择设置为仅所需的选项。

 $(document).ready(function(){ var $optgroups = $('#subcategory > optgroup'); $("#category").on("change",function(){ var selectedVal = this.value; $('#subcategory').html($optgroups.filter('[label="'+selectedVal+'"]')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="category"> <option value="Fashion">Fashion</option> <option value="Electronics">Electronics</option> </select> <select name="subcategory" id="subcategory"> <optgroup label="Fashion"> <option value="Men's wear">Men's wear</option> <option value="Women's wear">Women's wear</option> </optgroup> <optgroup id="B" label="Electronics"> <option value="Television">Television</option> <option value="Game Console">Game Console</option> </optgroup> </select> 

Answer 2

在这里你有一个解决方案

 $(document).ready(function(){ $("#category").on("change",function(){ var selectedVal = $(this).find("option:selected" ).val(); $('#subcategory > optgroup[label="'+selectedVal+'"]') .show() .siblings("optgroup") .css("display","none"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="category"> <option value="Fashion">Fashion</option> <option value="Electronics">Electronics</option> </select> <select name="subcategory" id="subcategory"> <optgroup label="Fashion"> <option value="Men's wear">Men's wear</option> <option value="Women's wear">Women's wear</option> </optgroup> <optgroup id="B" label="Electronics"> <option value="Television">Television</option> <option value="Game Console">Game Console</option> </optgroup> </select> 

希望这会帮助你。