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: 222624
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

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
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

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook