切换显示/隐藏optgroup子女jquery

Question

我有一个很长的选项列表，用optgroups分隔。我试图让每个OPTGROUP显示/隐藏其子点击时：

$("optgroup").toggle(function(){ 
    $(this).children().show(); 
}, function() { 
    $(this).children().hide(); 
}); 

选项列表：

<form> 
<select> 
<optgroup label="a"> 
<option id="a1">a1</option> 
<option id="a2">a2</option> 
<option id="a3">a3</option> 
<option id="a4">a4</option> 
</optgroup> 

<optgroup label="b"> 
<option id="b1">b1</option> 
<option id="b2">b2</option> 
<option id="b3">b3</option> 
<option id="b4">b4</option> 
</optgroup> 
</select> 
</form> 

当我点击OPTGROUP，它不切换显示孩子。

Answer 1

您的切换事件永远不会执行，因为您无法选择optgroup。

我建议使用2个选择元素。在第1部分选择optgroup，然后用相关选项更新第2部分。