jquery - 切换显示/隐藏 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 个选择元素。选择第一个中的 optgroup，然后使用相关选项更新第二个。