How to change selection mode of list box in javascript

Question

I have a list box which is in Multiple selection mode but on a particular radio button click i want to change it as Single selection mode. Please help me out

  <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");
        }
    }

// When alert says yes means i select yes than designation id List_Designation will be change in select mode.

create a jsfiddle and you'll be more likely to get an answer... — TheZuck
– TheZuck, Commented Apr 16, 2014 at 6:40

Chankey Pathak · Accepted Answer · 2014-04-16 06:43:32Z

0

You can use jquery-ui-multiselect-widget plugin. It's exactly what you are looking for IMO. There you can set multiple: false if you want to change the mode to single selection mode.

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

Check the demos and code here. If you don't want to use the plugin, just check its code, you'll get the logic, hope it helps.

answered Apr 16, 2014 at 6:43

Chankey Pathak

21.8k12 gold badges88 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sonam Mohite Over a year ago

I have given some hint of code. As my requirement is regarding List Box

Chankey Pathak Over a year ago

@user1280492: Check this: stackoverflow.com/a/1071531/257635, modify it such that on click on a particular button you set item.Selected = false; for all except one.

Sonam Mohite Over a year ago

Its server side code, as i want in javascript only'

SeanCannon · Accepted Answer · 2014-04-16 06:45:44Z

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;   
    });
}());

Demo: http://jsfiddle.net/KV35g/

answered Apr 16, 2014 at 6:45

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Collectives™ on Stack Overflow

How to change selection mode of list box in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related