jQuery UI MultiSelect 小部件 - 从多选下拉菜单中的 optgroup 选项中仅选择一项答案

【问题标题】：jQuery UI MultiSelect Widget -Select only one from optgroup options in multiselect drop downjQuery UI MultiSelect 小部件 - 从多选下拉菜单中的 optgroup 选项中仅选择一项
【发布时间】：2014-07-03 07:10:25
【问题描述】：

我有这样的下拉

<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>

我使用 jQuery UI MultiSelect Widget 插件进行多下拉，但我应该从每个 optgroup 选项中只选择一个选项。

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

【问题讨论】：

创建一个fiddle
你能把这段代码弄成小提琴吗？

标签： jquery html jquery-ui jquery-plugins

【解决方案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);
        }

}

DEMO

【讨论】：