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>

用户在列表中选择item 1.1。按预期选择item 1.1。
用户在列表中选择item 2.1。现在，item 1.1和item 2.1都已被选中。
用户在列表中选择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工作，这几乎总是一个加号。

带选项组的多选框：每组选择一个

1 个答案: