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
How to select multiple values from 'a dropdown look & feel' in a Web application
Prize winner in Competition "Best ASP.NET article of September 2008"
MultiSelectDropDownEx.zip
MultiSelectDropDownEx
App_Data
drop.gif
MultiSelectDropDownEx.suo
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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");
	        divRef.style.display = "block";
	        var divRefC = document.getElementById("divCheckBoxListClose");
	        divRefC.style.display = "block";
	    }
    	
	    function HideMList()
	    {
	        document.getElementById("divCheckBoxList").style.display = "none";   
	        document.getElementById("divCheckBoxListClose").style.display = "none";   
	    }
	    
        function FindSelectedItems(sender,textBoxID)
        {       
            var cblstTable = document.getElementById(sender.id);
            var checkBoxPrefix = sender.id + "_";
            var noOfOptions = cblstTable.rows.length;
            var selectedText = "";
            for(i=0; i < noOfOptions ; ++i)
            {
                if(document.getElementById(checkBoxPrefix+i).checked)
                {
                    if(selectedText == "")                
                        selectedText = document.getElementById(checkBoxPrefix+i).parentNode.innerText;
                    else
                        selectedText = selectedText + "," + document.getElementById(checkBoxPrefix+i).parentNode.innerText;
                }
            }    
            document.getElementById(textBoxID.id).value = selectedText;   
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" class="Default">      
        <asp:ScriptManager ID="smDefault" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="upDefault" runat="server">
            <ContentTemplate>     
                <asp:Label ID="lblDescription" runat="server" Text="Label"></asp:Label> <br />
                <div id="divCustomCheckBoxList" runat="server" onmouseover="clearTimeout(timoutID);" onmouseout="timoutID = setTimeout('HideMList()', 750);">
                    <table>
                        <tr>
                            <td align="right" class="DropDownLook">
                                <input id="txtSelectedMLValues" type="text" readonly="readonly" onclick="ShowMList()" style="width:229px;" runat="server" />
                            </td>
                            <td align="left" class="DropDownLook">
                                <img id="imgShowHide" runat="server" src="drop.gif" onclick="ShowMList()" align="left" />                
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="DropDownLook">
                                <div>
            	                    <div runat="server" id="divCheckBoxListClose" class="DivClose">			                        
		                                <label runat="server" onclick="HideMList();" class="LabelClose" id="lblClose"> x</label>
		                            </div>
                                    <div runat="server" id="divCheckBoxList" class="DivCheckBoxList">
		                                <asp:CheckBoxList ID="lstMultipleValues" runat="server" Width="250px" CssClass="CheckBoxList"></asp:CheckBoxList>						        			           			        
		                            </div>
		                        </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <br />
                <div>
                    <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>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>   
    </form>
</body>
</html>

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.

License

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 | Mobile
Web01 | 2.8.140721.1 | Last Updated 17 Dec 2008
Article Copyright 2008 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid