Click here to Skip to main content
13,095,218 members (75,824 online)
Click here to Skip to main content

Stats

217K views
6.1K downloads
168 bookmarked
Posted 25 Sep 2008

Multiselect Dropdown for Web Applications

, 17 Dec 2008
How to select multiple values from 'a dropdown look & feel' in a Web application
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)

Share

About the Author

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

You may also be interested in...

Pro
Pro
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170813.1 | Last Updated 17 Dec 2008
Article Copyright 2008 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid