Convert ASP.NET DropDownList into Multi Select ListBox using jQuery
Posted by: Suprotim Agarwal
in Category jQuery and ASP.NET
Abstract: In this simple article, we will see how to convert an ASP.NET DropDownList into Multi Select ListBox in order to select multiple items.
In this simple article, we will see how to convert an ASP.NET DropDownList into Multi Select ListBox, in order to select multiple items. This article is a chapter from my EBook called 51 Recipes with jQuery and ASP.NET Controls. The chapter has been modified a little to publish it as an article and use the latest jQuery version.
Multiple items cannot be selected in a DropDownList unless you change the default behavior of this control by writing custom code. It’s the ListBox control that allows the user to select multiple items when its ‘SelectionMode’ property is set to multiple.
I faced this requirement recently during a client visit. The client was keen on keeping a DropDownList to save screen space. However they also wanted to convert the DropDownList to a ListBox, if the user wanted to select multiple items. So to solve this requirement client-side, a jQuery was used to 'make it appear' that we are converting the DropDownList to a MultiSelect ListBox control on the click of a Button. Let us see the entire code first
As you can see, to convert the DropDownList to a MultiSelect ListBox control on the click of a Button, we just requires a single line of jQuery code as shown here:
Once the DropDownList is converted into a ListBox control, the user can select multiple items and list them by using the code shown below
Before the Button is clicked, the output looks like this:
After the Button is clicked, the DropDownList is converted to a Multi Select Listbox as shown below:
After the user selects multiple values and clicks the Button, the output changes as shown here:
See a Live Demo
I hope you found this article useful and I thank you for viewing it. This article was taken from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls which contains similar recipes that you can use in your applications.
The entire source code of this article can be downloaded over here