javascript - 带 Optgroups 的多选框 : Select one per group

Question

我有一个带有 multiple 的选择框属性集。我也在使用 <optgroup>标签以在我的选择框中分隔类别。我正在寻找一种方法，使用 javascript 或 jQuery，让每个组中的各种选项与“单选按钮逻辑”而不是“复选框逻辑”一起运行。例如:

<optgroup label="cat1">
    <option>item 1.1</option>
    <option>item 1.2</option>
</optgroup>
<optgroup label="cat2">
    <option>item 2.1</option>
    <option>item 2.2</option>
</optgroup>

1. 用户选择 item 1.1在列表中。 item 1.1按预期选择。
2. 用户选择 item 2.1在列表中。现在都item 1.1和 item 2.1被选中。
3. 用户选择 item 1.2在列表中。现在item 1.1被取消选择，而 item 2.1和 item 1.2都被选中。

这有意义吗？提前致谢!

Answer 1

$('#select-box-id optgroup option').click(function() {
    // only affects options contained within the same optgroup
    // and doesn't include this
    $(this).siblings().prop('selected', false);
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

尽管如此，说实话，如果您想要“单选按钮逻辑”，您可能会考虑不使用多选框。无论如何，多个选择框的可用性是一种痛苦(人们必须按住 Ctrl 键并单击才能选择多个选项)。考虑使用单选按钮，或为每个组使用单选框。两者都更难搞砸。而且它们无需 JS 即可工作，这几乎总是一个加号。