切换显示/隐藏optgroup子项jquery

我有一个很长的选项列表，用optgroup分隔。我试图使每个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时，它不会切换显示子对象。

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

---

我建议使用2个选择元素。在第一个选项中选择optgroup，然后用相关选项更新第二个选项。

我认为您不能显示/隐藏optgroup标记。相反，我会寻找一个插件替代品：你不能选择Thank@jerome.s，我会用它，我认为这不适合我，因为这对用户来说有点费时，所以我建议使用一个带有过滤的select元素，这样他们至少可以过滤select选项。@jerome.s上面推荐了一个非常有效的方法-select是一个样式表，用于像我这样使用optgroup等的费力列表。