Click here to Skip to main content
13,630,702 members
Click here to Skip to main content
Add your own
alternative version


33 bookmarked
Posted 4 Mar 2007
Licenced CPOL

Html drop down list with multi select option

, 4 Mar 2007
Rate this:
Please Sign up or sign in to vote.
ASP .NET user control for selecting multiple option from a drop down list


ASP.NET is a very fast and efficient way to program small as well as enterprise level web applications. It provides lot of controls and components to build web pages. But my requirement was to select multiple choices/options from a drop down combo box in a web page. ASP .NET 1.1 does not provide such control but ASP .NET provides the option to the developer for developing custom control. It was good option for me and I developed the custom control which will act like a multi select combo box.

This custom control can be used in IE without any changes. This component is not tested on mozilla/firefox. In order to use it on firefox, little changes (change in client script) are required.

Development Components and Notes

For developing this control, simple html classes, CSS and javascript are used. Server side code is written in C# and .NET framework 1.1. But this component can be used in .NET framework 2.0 with little changes in server script. This component consists of a mulline <SELECT> and a <DIV>. <DIV> contents the options with a check box infront of each options.

Also component provides some properties through which developer can set some value to render it in ASP.NET engine.

Properties are like:

1. ListItems : Developer can set/get NameValueCollection for populating options.
2. BackColor : Developer can set/get background color of drop down list;
3. Name : Developer can set/get the name of the control to distuguise betwen multiple
4. DisableMethod : Developer can set teh disable method. This method is used to hide
the <select> component in the page. Developer has to write the
statements to hide <select> componenets. Because Z-Index does not
work in case of <select>.
5. OnChange : Developer can attach javascript method which will be called when select
is changed by user.
6. MaxSize : Developer can set the Maximum size of ListBox.
7. MaxListHeight: Developer can set the Maximum height if drop down list.

Screen Shots

1. Expanded DropDown List.

Screenshot - screen1.jpg

2. Selected values are shown in a html Label after submitting the page.

Screenshot - screen3.jpg

How to use the control

This component is a ASP.NET user control. It can be used in any ASP.NET web page. Also to populate the List, component takes a NameValueCollection object as its Property
"ListItems". So web page should contain reference to "System.Collections.Specialized" namespace. Also the component is using some images. Before using the control, make sure code contains correct image references.

After selecting the options from the drop down list developer can get the selected items in form of a semocolon(;) seperated string using a javascript method GetDataListFromMultiSelectCombo()

Sample Code to use the control

<pre><%@ Page language="c#" AutoEventWireup="false" %>
<%@ Import namespace="System.Collections"%>
<%@ Import namespace="System.Collections.Specialized"%>
<%@ Register Tagprefix="Custom" Tagname="MultiSelectCombo" Src="MultiSelectCombo.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 

    <title>Defult Page</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="">
    <script language="javascript">
    function OnSubmit()
        document.Main.hid_selected_lang.value = GetDataListFromMultiSelectCombo();
        document.Main.action = "MultiSelectComboBox.aspx";
        return true;        
  <body MS_POSITIONING="GridLayout">
    <form id="Main" method="post" runat="server">
        NameValueCollection opItems = new NameValueCollection();
        opItems.Add("C#","Visual C#");
        opItems.Add("VC++","Visual C++");
        opItems.Add("VB","Visual Basic");
        opItems.Add("J#","Visual J#");
        Languege.ListItems = opItems;
    Select Language: <Custom:MultiSelectCombo id="Languege" Name="Languege" MaxSize="2" MaxListHeight="4" runat="server"></Custom:MultiSelectCombo>

    string sValues = Request["hid_selected_lang"];
    if (sValues != null &&
        sValues = "None";
    if (sValues != null && sValues != "")
    <label id="selected_lang" name="selected_lang">Selected Laguges : <%=sValues%></label>

    <input type="submit" value="Submit" onclick="OnSubmit()">
    <input type="hidden" id="hid_selected_lang" name="hid_selected_lang">


Supported Environment

While developing the component, .NET Framework 1.1 is used. But this control can be used in .NET Framework 2.0 with little or no changes.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
India India
Profile : Software Developer
Platform : Microsoft Technologies

You may also be interested in...

Comments and Discussions

GeneralUnknown server tag Pin
Member 26191097-Jul-09 7:26
memberMember 26191097-Jul-09 7:26 
GeneralRe: Unknown server tag Pin
Member 26191097-Jul-09 7:31
memberMember 26191097-Jul-09 7:31 
QuestionError on idListBox attribute? Pin
smcirish11-Nov-08 3:38
membersmcirish11-Nov-08 3:38 
QuestionHow to maintain the selected value in the dropdown after clicking the button? Pin
ambikaa25-Aug-08 1:00
memberambikaa25-Aug-08 1:00 
AnswerRe: How to maintain the selected value in the dropdown after clicking the button? Pin
rajdeep_p26-Sep-08 23:12
memberrajdeep_p26-Sep-08 23:12 
GeneralCannot find control's properties Pin
ironlee10-Aug-08 21:12
memberironlee10-Aug-08 21:12 
GeneralRe: Cannot find control's properties Pin
rajdeep_p26-Sep-08 23:19
memberrajdeep_p26-Sep-08 23:19 
GeneraljavaScript &lt;% notation Pin
BenKh9-Jul-08 4:45
memberBenKh9-Jul-08 4:45 
AnswerRe: javaScript &lt;% notation Pin
rajdeep_p29-Jul-08 1:45
memberrajdeep_p29-Jul-08 1:45 
QuestionHow much customization is needed when I add more combo controls on the same aspx page? [modified] Pin
satishkcode27-Jun-08 12:06
membersatishkcode27-Jun-08 12:06 
AnswerRe: How much customization is needed when I add more combo controls on the same aspx page? Pin
rajdeep_p29-Jul-08 1:44
memberrajdeep_p29-Jul-08 1:44 
GeneralAdding items to this list from javascript Pin
Aftab Jahangir18-Jun-08 10:25
memberAftab Jahangir18-Jun-08 10:25 
GeneralRe: Adding items to this list from javascript Pin
rajdeep_p29-Jul-08 1:41
memberrajdeep_p29-Jul-08 1:41 
Generala msg from Sreedhar Pin
Sean Ewington3-May-07 3:14
staffSean Ewington3-May-07 3:14 
AnswerRe: a msg from Sreedhar Pin
rajdeep_p27-Jun-07 2:58
memberrajdeep_p27-Jun-07 2:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.180712.1 | Last Updated 5 Mar 2007
Article Copyright 2007 by rajdeep_p
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid