Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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
control.
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

<%@ 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" > 

<html>
  <head>
    <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="http://schemas.microsoft.com/intellisense/ie5">
    <script language="javascript">
    function OnSubmit()
    {
        document.Main.hid_selected_lang.value = GetDataListFromMultiSelectCombo();
        document.Main.action = "MultiSelectComboBox.aspx";
        return true;        
    }
    </script>
  </head>
  <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.Equals("-1"))
    {
        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">
    
    </form>
    
  </body>
</html>

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.

License

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

About the Author

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

Comments and Discussions

 
GeneralUnknown server tag PinmemberMember 26191097-Jul-09 7:26 
GeneralRe: Unknown server tag PinmemberMember 26191097-Jul-09 7:31 
QuestionError on idListBox attribute? Pinmembersmcirish11-Nov-08 3:38 
QuestionHow to maintain the selected value in the dropdown after clicking the button? Pinmemberambikaa25-Aug-08 1:00 
AnswerRe: How to maintain the selected value in the dropdown after clicking the button? Pinmemberrajdeep_p26-Sep-08 23:12 
GeneraljavaScript &lt;% notation PinmemberBenKh9-Jul-08 4:45 
AnswerRe: javaScript &lt;% notation Pinmemberrajdeep_p29-Jul-08 1:45 
QuestionHow much customization is needed when I add more combo controls on the same aspx page? [modified] Pinmembersatishkcode27-Jun-08 12:06 
AnswerRe: How much customization is needed when I add more combo controls on the same aspx page? Pinmemberrajdeep_p29-Jul-08 1:44 
GeneralAdding items to this list from javascript PinmemberAftab Jahangir18-Jun-08 10:25 
GeneralRe: Adding items to this list from javascript Pinmemberrajdeep_p29-Jul-08 1:41 
Generala msg from Sreedhar PinstaffSean Ewington3-May-07 3:14 
AnswerRe: a msg from Sreedhar Pinmemberrajdeep_p27-Jun-07 2:58 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140709.1 | Last Updated 5 Mar 2007
Article Copyright 2007 by rajdeep_p
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid