Question

我有一个多选框，其中包含选项组：

<select id="sel_salaryrange" name="salaryranges[]" size="8" multiple="1">
    <optgroup label="PKR" class="PKR">
        <option value="1">15000 - 20000</option>
        <option value="2">18000 - 35000</option>
        <option value="3" selected="selected">50000 - 100000</option>
    </optgroup>
    <optgroup label="SAR" class="SAR">
        <option value="4">1000 - 2000</option>
        <option value="6" selected="selected">3000 - 5000</option>
    </optgroup>
    <optgroup label="USD" class="USD">
        <option value="5">1000 - 3000</option>
    </optgroup>
</select>

即。有3个选项组名称：'PKR'，'SAR'和'USD'，其中2个项目在'PKR'和'SAR'选项组中被选中。现在我想禁止在同一选项组中进行多项选择，如何通过jQuery或JavaScript解析它，JQuery将更受欢迎。

在这方面我非常感谢你。

由于

Answer 1

试试这个：

$('select#sel_salaryrange option').mousedown(function() {
    $(this).parent().find('option:selected').removeAttr('selected');
});

当用户点击某个选项时，此代码会清除当前optgroup中的所有选项，并允许选中所单击的选项。

此代码有一个明显的缺点：用户仍然可以使用键盘选择多个值。

我宁愿使用单独的无线电输入，或至少使用不是multiple的单独选择。

Answer 2

这个有点棘手 - 我不认为你可以在<option>标签上听到任何合适的事件来检查它们何时被选中。您必须在change标记上收听<select>事件，并跟踪所选内容以及不是您自己的内容。

您可以将其拆分为几个没有<select>属性的multiple吗？

使用选项组在多个选择框中选择唯一选项

2 个答案: