Question

我这样下拉

<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选项中只选择一个选项。

EG。如果选项＆＃34;第一＆＃34;被选为＆＃39; name1＆＃39;那么＆＃34;第二＆＃34;，＆＃34;第三＆＃34;不应该选择＆＃39; name1＆＃39; optgroup选项。

Answer 1

尝试使用无线电！

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

Answer 2

试试这个

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

DEMO

Answer 3

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

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

fiddle

Answer 4

试试这个：

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：http://jsfiddle.net/thauwa/ee8VH/

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

在多选下拉列表中仅从optgroup选项中选择一个

5 个答案: