Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Multiselect Dropdown for Web Applications

, 17 Dec 2008 CPOL
How to select multiple values from 'a dropdown look & feel' in a Web application
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="">
<head runat="server">
    <title>Multi Select DropDown</title>
    <link href="MyStyles.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">	        
        var timoutID;
	    function ShowMList()
	        var divRef = document.getElementById("divCheckBoxList"); = "block";
	        var divRefC = document.getElementById("divCheckBoxListClose"); = "block";
	    function HideMList()
	        document.getElementById("divCheckBoxList").style.display = "none";   
	        document.getElementById("divCheckBoxListClose").style.display = "none";   
        function FindSelectedItems(sender,textBoxID)
            var cblstTable = document.getElementById(;
            var checkBoxPrefix = + "_";
            var noOfOptions = cblstTable.rows.length;
            var selectedText = "";
            for(i=0; i < noOfOptions ; ++i)
                    if(selectedText == "")                
                        selectedText = document.getElementById(checkBoxPrefix+i).parentNode.innerText;
                        selectedText = selectedText + "," + document.getElementById(checkBoxPrefix+i).parentNode.innerText;
            document.getElementById( = selectedText;   
    <form id="form1" runat="server" class="Default">      
        <asp:ScriptManager ID="smDefault" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="upDefault" runat="server">
                <asp:Label ID="lblDescription" runat="server" Text="Label"></asp:Label> <br />
                <div id="divCustomCheckBoxList" runat="server" onmouseover="clearTimeout(timoutID);" onmouseout="timoutID = setTimeout('HideMList()', 750);">
                            <td align="right" class="DropDownLook">
                                <input id="txtSelectedMLValues" type="text" readonly="readonly" onclick="ShowMList()" style="width:229px;" runat="server" />
                            <td align="left" class="DropDownLook">
                                <img id="imgShowHide" runat="server" src="drop.gif" onclick="ShowMList()" align="left" />                
                            <td colspan="2" class="DropDownLook">
            	                    <div runat="server" id="divCheckBoxListClose" class="DivClose">			                        
		                                <label runat="server" onclick="HideMList();" class="LabelClose" id="lblClose"> x</label>
                                    <div runat="server" id="divCheckBoxList" class="DivCheckBoxList">
		                                <asp:CheckBoxList ID="lstMultipleValues" runat="server" Width="250px" CssClass="CheckBoxList"></asp:CheckBoxList>						        			           			        
                <br />
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit Selection" OnClick="btnSubmit_Click" /> 
                    <br />
                    <br />
                    <asp:Label ID="lblTextSelected" runat="server" Text="" Font-Bold="true" ></asp:Label>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


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


About the Author

Sandeep Mewara
Software Developer (Senior)
India India
Current location: Bangalore, India.
Follow on   Twitter

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 17 Dec 2008
Article Copyright 2008 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid