How to multiple select item in ListBox without press CTRL in Asp.Net?

Question

I want to select multiple items in ListBox, but the browser requires the user to press CTRL to select multiple items otherwise it selects just one item.

I want to select multiple items without pressing CTRL, and I don't want to use CheckBoxList. Is there any better way of doing it? Using pure javascript, or JQuery or Codebehind.

(I already added SelectionMode="Multiple" attributes to ListBox controls)

Code:

    <asp:ListBox ID="ListBox1" runat="server" Height="210px" Width="203px" SelectionMode="Multiple">
        <asp:ListItem>1000</asp:ListItem>
        <asp:ListItem>2000</asp:ListItem>
        <asp:ListItem>4000</asp:ListItem>
        <asp:ListItem>4000</asp:ListItem>
        <asp:ListItem>5000</asp:ListItem>
        <asp:ListItem>6000</asp:ListItem>
    </asp:ListBox>

Check this link Making a standard ASP.NET listbox do multiselect without holding Ctrl . I tried it just now and working perfectly for me. — Microsoft DN
– Microsoft DN, Commented Nov 4, 2015 at 13:59
Was this project using .NET Framework v2? In later versions of the framework, Multiple didn't need ctrl and offered "Extended" for the v2 functionality. — Paul Totzke
– Paul Totzke, Commented Sep 6, 2017 at 15:25

Microsoft DN · Accepted Answer · 2015-11-04 14:06:14Z

Ref: Making a standard ASP.NET listbox do multiselect without holding Ctrl

Just change your listbox to

<asp:ListBox ID="ListBox1" runat="server" Height="210px" Width="203px" SelectionMode="Multiple" onclick="ListBoxClient_SelectionChanged(this, event);">
        <asp:ListItem>1000</asp:ListItem>
        <asp:ListItem>2000</asp:ListItem>
        <asp:ListItem>4000</asp:ListItem>
        <asp:ListItem>4000</asp:ListItem>
        <asp:ListItem>5000</asp:ListItem>
        <asp:ListItem>6000</asp:ListItem>
</asp:ListBox>

And add following script in your <script> tag

<script type="text/javascript" language="javascript">
        var selectedClientPermissions = [];

        function pageLoad() {
            var ListBox1 = document.getElementById("<%= ListBox1.ClientID %>");

            for (var i = 0; i < ListBox1.length; i++) {
                selectedClientPermissions[i] = ListBox1.options[i].selected;
            }
        }

        function ListBoxClient_SelectionChanged(sender, args) {
            var scrollPosition = sender.scrollTop;

            for (var i = 0; i < sender.length; i++) {
                if (sender.options[i].selected) selectedClientPermissions[i] = !selectedClientPermissions[i];

                sender.options[i].selected = selectedClientPermissions[i] === true;
            }

            sender.scrollTop = scrollPosition;
        }
</script>

Suhani · Accepted Answer · 2021-09-27 15:31:59Z

0

If you are using jquery, simply add this script:

$('option').mousedown(function(e) {
        e.preventDefault();
        $(this).prop('selected', !$(this).prop('selected'));
        return false;
     });

answered Sep 27, 2021 at 15:31

Suhani

811 silver badge5 bronze badges

1 Comment

Ferran Salguero Over a year ago

On Edge the listbox scrolls to top on click, shame... I preferred this solution for simplicity

Collectives™ on Stack Overflow

How to multiple select item in ListBox without press CTRL in Asp.Net?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related