如何在JavaScript中更改列表框的選擇模式

Question

我有一個處於多選模式的列表框，但是在特定的單選按鈕上單擊我想將其更改為單選模式。 請幫幫我

  <tr>
                                    <td style="text-align: right; vertical-align: top; width: 21%;">
                                        <asp:Label ID="Label4" runat="server" Text="Do ypu want to apply NET/SET/PH.D. rule" ></asp:Label>
                                    </td>
                                    <td align="left" style="vertical-align: top;">
                                        :
                                    </td>
                                    <td align="left">
                                        <asp:RadioButtonList ID="RB_applyRule" runat="server" RepeatDirection="Horizontal" 
                                               onclick="radioButtonClick();"
                                            onselectedindexchanged="RadioButtonList1_SelectedIndexChanged" >
                                                <asp:ListItem Text="Yes   &#160;&#160;&#160;&#160;&#160;&#160;" Value="0" Selected="True" ></asp:ListItem>
                                                <asp:ListItem Text="No" Value="1" ></asp:ListItem>
                                            </asp:RadioButtonList>
                                        &nbsp; <font class="Mandatory">*</font>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right; vertical-align: top; width: 21%;">
                                        <asp:Label ID="lblDesignation" runat="server" Text="Seniority for designation" meta:resourcekey="lblDesignationResource1"></asp:Label>
                                    </td>
                                    <td align="left" style="vertical-align: top;">
                                        :
                                    </td>
                                    <td align="left">
                                        <asp:ListBox ID="List_Designation" runat="server" Width="306px" SelectionMode="Multiple"
                                            Rows="1"></asp:ListBox>
                                        &nbsp; <font class="Mandatory">*</font>
                                    </td>
                                </tr>
                                <tr>

// Javascript

    function radioButtonClick() {
        var rbList = document.getElementById('<%=RB_applyRule.ClientID%>');
        var rbCount = rbList.getElementsByTagName("input");
        var targRB;
        for (var i = 0; i < rbCount.length; i++) {
            if (rbCount[i].checked == true) {
                // var labelArray = rbCount[i].parentNode.getElementsByTagName('label');
                // targlist = targlist + labelArray[0].innerHTML + ", ";     // Get Label of Radiobutton
                targRB = rbCount[i].value;
             //   alert(targRB);
            }
        }
        if (targRB == "0") {
            alert("Yes");
        }
        if (targRB == "1") {
            alert("No");
        }
    }

//當警報說“是”時，我選擇“是”，但指定ID List_Designation將在選擇模式下更改。

Answer 1

您可以使用jquery-ui-multiselect-widget插件。 這正是您要尋找的IMO。 您可以在其中設置multiple: false如果要將模式更改為單選模式，則為multiple: false 。

$("select").multiselect({
   multiple: false,
   header: "Select an option",
   noneSelectedText: "Select an Option",
   selectedList: 1
});

在此處查看演示和代碼。 如果您不想使用該插件，只需檢查其代碼，即可獲得邏輯，希望對您有所幫助。

Answer 2

HTML ：

<input type="checkbox" id="toggle"/> 

<select id="my-select">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
    <option value="bat">Bat</option>
</select>

JavaScript ：

(function () {
    var $checkbox = document.getElementById('toggle'),
        $select   = document.getElementById('my-select');

    $checkbox.addEventListener('click', function () {
        $select.multiple = !$select.multiple;   
    });
}());

演示 ： http : //jsfiddle.net/KV35g/