从多选下拉菜单中的 optgroup 选项中仅选择一项答案

【问题标题】：Select only one from optgroup options in multiselect drop down从多选下拉菜单中的 optgroup 选项中仅选择一项
【发布时间】：2014-07-02 10:45:41
【问题描述】：

我有这样的下拉

<select multiple="multiple">
 <optgroup label='name1'>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
 </optgroup>

 <optgroup label='name2'>
   <option value="1">First</option>
   <option value="2">Second</option>
   <option value="3">Third</option>
 </optgroup> 
<select>

这是多选下拉菜单，但我应该从每个 optgroup 选项中只选择一个选项。

例如。如果为“name1”选择了选项“First”，则不应为“name1”optgroup 选项选择“second”、“third”。

【问题讨论】：

如果你想在不禁用元素的情况下做你需要的事情，请参考我的回答。

标签： jquery html css

【解决方案1】：

试试这个：

var memoryOne;
var memoryTwo;
$("option").mouseover(function () {
    var selectedOne = $("optgroup:nth-of-type(1)").children("option:selected").index();
    var selectedTwo = $("optgroup:nth-of-type(2)").children("option:selected").index();
    memoryOne = selectedOne;
    memoryTwo = selectedTwo;
}).click(function () {
    var theSelectedIndex = $(this).index();
    var theParentIndex = $(this).parent().index();
    setTimeout(function () {
        clickEvent(theSelectedIndex, theParentIndex, memoryOne, memoryTwo);
    }, 1);
});

function clickEvent(passedIndex, parentIndex, memoryOne, memoryTwo) {
    var selectionOne = memoryOne;
    var selectionTwo = memoryTwo;
    var theParent = $("optgroup:eq(" + parentIndex + ")");
    var theOption = $("optgroup:eq(" + parentIndex + ") option:eq(" + passedIndex + ")");
    var theGrandParent = $("select");
    theParent.find("option:not(option:eq(" + passedIndex + "))").prop("selected", false);

    if (parentIndex == 0) {
        $("optgroup:not(optgroup:eq(" + parentIndex + "))").children("option:eq(" + selectionTwo + ")").prop("selected", true);
    } else if (parentIndex == 1) {
        $("optgroup:not(optgroup:eq(" + parentIndex + "))").children("option:eq(" + selectionOne + ")").prop("selected", true);
    }
}

演示：http://jsfiddle.net/thauwa/ee8VH/

【讨论】：

上面的代码有冗余并且使用了不好的编程习惯，所以任何潜在的用户都可能不得不清理它。我很着急。

【解决方案2】：

试试收音机吧！

<form name="myform">
    <div align="center">
        <input type="radio" name="name1" value="First" />First<br />
        <input type="radio" name="name1" value="Second" />Second<br />
        <input type="radio" name="name1" value="Third" />Third

        <hr>

        <input type="radio" name="name2" value="First" /> First<br />
        <input type="radio" name="name2" value="Second" /> Second<br />
        <input type="radio" name="name2" value="Third" /> Third
    </div>
</form>

【讨论】：

【解决方案3】：

试试这个

$('select optgroup option').click(function () {
    var len = $(this).parent().find(':selected').length
    if (len > 1) {
        alert('only 1 allowed')
        $(this).prop('selected', false)
    }
});

DEMO

【讨论】：

这是另一个代码，禁止在组下选择多个项目而不显示任何警报（此行为可能会惹恼一些用户）jsfiddle.net/viphalongpro/d3Dhn/7
@KingKing 在单个组中的多个选项中可能使用代码检查
什么意思？我的版本有什么问题？据我了解，您的代码做了类似的事情，即使没有显示警报，用户仍然可以看到点击的项目被选中和取消选择（由$(this).prop('selected', false) 引起）。

【解决方案4】：

我建议在选择一个之后禁用休息选项：

$("select").on("change",
                   function(){
                        $(this).find("option:selected").parent().attr("disabled",true);
                    });

fiddle

【讨论】：

【解决方案5】：

多选旨在允许多选，而标准列表/菜单仅允许单选。试试：

<select name="name1" id="name1">
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
</select>
<select name="name2" id="name2">
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
</select>

【讨论】：