Today I was working on one of my project and I noticed the need of selecting multiple values in a DropDownList. Being a .NET guy my first thought was to us ListBox because is gives same feature, we can selected multiple values by holding ctrl (control) key. But the reason for not using it was that it is not user friendly and its view is not good.
After searching for few minutes I found this Bootstrap Multiselect plugin. I was using bootstrap in my project as well so that was best fit for me. For other also it is very good tool and very easy to use with any platform. I used it with ASP.NET web forms so showing the same here.
This will be something like this
<link rel=”stylesheet” href=”css/bootstrap-multiselect.css” type=”text/css”/>
Now you have to add a ListBox on your aspx page and keep in mind that SelectionMode should be set to Multiple. Otherwise it will not allow you to select multiple values.
<asp:ListBox ID="ListBox_MultiSelect" runat="server" SelectionMode="Multiple"> <asp:ListItem Text="Option 1" Value="1"></asp:ListItem> <asp:ListItem Text="Option 2" Value="2"></asp:ListItem> <asp:ListItem Text="Option 3" Value="3"></asp:ListItem> <asp:ListItem Text="Option 4" Value="4"></asp:ListItem> <asp:ListItem Text="Option 5" Value="5"></asp:ListItem> </asp:ListBox>
After adding library references and the ListBox control on your web form you have to call the plugin method to apply it on your control. Remember this call of plugin should come any place below you control on page.
Now you are ready use this plugin so just press F5 and see the magic. You will see somthing like this:
While loading the plugin you can provide various parameters based on your needs. For example in above sample you can see four parameters.
- includeSelectAllOption – Adds one option on top of the options list which will select all options upon click
- allSelectedText – This will allow to set the text of the Select All option entry
- enableFiltering – If this is set to true you will see a text field which will allow you to search through the list options. This is useful for dropdowns with large number of options.
- filterPlaceholder – This gives option to set filter text field place holder.
These are just 4 examples of parameters but there are many more option to customize this plugin and you can use them as per your needs.