Convert ASP.NET DropDownList into Multi Select ListBox using jQuery

Posted by: Suprotim Agarwal , on 12/29/2010, in Category jQuery and ASP.NET
Views: 178524
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.

Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability. It’s also always best to choose appropriate server side controls at the time of designing the application. If the user turns off JavaScript in his browser, the jQuery code won't work. So use this example with caution. The code shown below has been tested on IE7, IE8, Firefox 3, Chrome 2 and Safari 4.

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

Convert DropDownList jQuery 

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:

DropDownList To ListBox 

Once the DropDownList is converted into a ListBox control, the user can select multiple items and list them by using the code shown below

Multiple Select DropDown jQuery 

Before the Button is clicked, the output looks like this:

DDL Button Click 

After the Button is clicked, the DropDownList is converted to a Multi Select Listbox as shown below:

MultiSelect DropDownList jQuery 

After the user selects multiple values and clicks the Button, the output changes as shown here:

Select Multiple Items jQuery 

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

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Terry Petty on Wednesday, February 9, 2011 2:56 AM
I have downloaded the project. And opened it with VS 2010. I always get this error. Can you provide some guidance?

---
It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level.  This error can be caused by a virtual directory not being configured as an application in IIS.

Comment posted by Suprotim Agarwal on Wednesday, February 9, 2011 3:05 AM
Terry: Look here for a possible solution - http://geekswithblogs.net/ranganh/archive/2005/04/25/37609.aspx
Comment posted by glmgracy on Monday, June 27, 2011 6:50 AM
this is really awesome, and I find if I remove the e.preventDefault() the result is not the same as above
Comment posted by abhijeet on Tuesday, February 7, 2012 9:10 AM
I want use jquery in my page which is containg maste page


master page :  <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
child page  :  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
      <script type="text/javascript">
            $(document).ready(function () {
            $("#Button2").click(function () {
                  alert("Hello world!");
            });
      });
    </script>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
Comment posted by sagar on Tuesday, February 7, 2012 9:55 AM
have a master page and a content page .added jquery library jquery-1.2.6.js.but it does not work for master-webcontent form.

Master page :


<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.2.6.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

WebContent forn:


<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <script type="text/javascript" language="javascript">
       $(document).ready(function() {
            $("#Button1").click(function() {
                alert("Hello world!");
            });
        });
</script>
  
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Content>


it's not working.when i debug by firebug it stop in $(document).ready(function()) section.but for my webform without a master page it works
Comment posted by Mathew Baker on Friday, July 13, 2012 6:53 AM
For those people unable to get it working because of using a master page (due to the ID containing prefixes like ct100_); change the jQuery selector so that it finds the control using a class name; eg:

<asp:DropDownList ID="ddl" CssClass="ddlClassName" runat="server">
...
</asp:DropDownList>

$(.ddlClassName)
Comment posted by Rohit on Saturday, November 24, 2012 7:32 AM
wicked concept , but when i multiselect my product name and save it to database , it only saves the first product item but not the rest ?? Please m doing my application in mvc3 and i have used it for Create . Do i have to do something else apart from View changes you have done . Many Thanks
Comment posted by bhupal on Friday, September 6, 2013 12:29 AM
its good to understand the concept...
Comment posted by dfgfdg on Saturday, May 31, 2014 8:26 AM
Sample comment

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel