如何在javascript中更改列表框的选择模式

时间:2014-04-16 06:37:10

标签: javascript listbox

我有一个处于多选模式的列表框但是在特定的单选按钮上单击我想将其更改为单选模式。请帮帮我

  <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将在选择模式中更改。

2 个答案:

答案 0 :(得分:0)

您可以使用jquery-ui-multiselect-widget插件。这正是您在寻找IMO的原因。如果要将模式更改为单选模式,可以设置multiple: false

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

检查演示和代码here。如果您不想使用该插件,只需检查其代码,您就会获得逻辑,希望它有所帮助。

答案 1 :(得分:0)

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