Javascript 带有optgroup的Multiselect框：为每个组选择一个

我有一个带有

多个属性集的选择框。我还使用
标记在我的选择框中分隔类别。我正在寻找一种方法，使用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.1
项目1.2
项目2.1
项目2.2

用户在列表中选择
项目1.1
<按预期选择代码>项目1.1

用户在列表中选择

项目2.1

。现在选择了

项目1.1

和

项目2.1

用户在列表中选择

项目1.2

。现在，

项目1.1

被取消选择，而

项目2.1

和

项目1.2

都被选择 这有意义吗？提前谢谢

$('#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的情况下工作，这通常是一个优点

考虑过在单选按钮逻辑中使用实际的单选按钮吗？我很欣赏这个建议，但是我使用了一个非常好的界面来包装selectbox。话虽如此，你的答案还是有效的！谢谢@UAWDT：即使在Ubuntu上的FF中，代码也能工作P如果它对你不起作用，那么你可能是用错了，我们需要更多关于发生了什么的细节。它在Chrome和IE中工作吗？它在做什么而不是它应该做什么？收集这些信息（以及你能告诉我们的关于这个问题的任何其他信息）并在新问题中发布。一个警告是，用户可以通过单击并拖动多个选项来选择多个选项。这个解决方案不能解决这个问题（我试过了）。如果我想使用复选框而不是标签，并且只想选中每个组中的复选框，我该怎么办？如果您将相关复选框组合在字段集、div或其他字段中，那么您可以执行类似的操作。但是，复选框旁边几乎总是有标签，而且您无法合理地检查标签……因此您将在

兄弟姐妹（）调用中特别要求复选框。