MultiSelectDropDownList

In CSS
.Default
{
font-size:smaller;
font-family:Tahoma;
}

table
{
padding:0px;
border-collapse:collapse;
}

.DropDownLook
{
padding:0px;
border-style:solid;
border-width:1px;
}

.DivClose
{
display:none;
position:absolute;
width:250px;
height:220px;
border-style:solid;
border-color:Gray;
border-width:1px;
background-color:#99A479;
}

.LabelClose
{
vertical-align:text-top;
position:absolute;
bottom:0px;
font-family:Verdana;
}

.DivCheckBoxList
{
display:none;
background-color:White;
width:250px;
position:absolute;
height:200px;
overflow-y:auto;
overflow-x:hidden;
border-style:solid;
border-color:Gray;
border-width:1px;
}

.CheckBoxList
{
position:relative;
width:250px;
height:10px;
overflow:scroll;
font-size:small;
}

In .CS

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
lstMultipleValues.Attributes.Add("onclick", "FindSelectedItems(this," + txtSelectedMLValues.ClientID + ");");
SetMultiValue();
lblDescription.Text = "On click of dropdown, the multi select option will appear.
Once you remove focus from the dropdown"
+ " area it will get auto collapsed.
In case needed, you can go ahead and close it with the close ('X') provided at the bottom.
";
}
}

protected void SetMultiValue()
{
DataTable dt = new DataTable("Table1");

DataColumn dc1 = new DataColumn("Text");
DataColumn dc2 = new DataColumn("Value");
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);

//To get enough data for scroll
dt.Rows.Add("Bangalore", 1);
dt.Rows.Add("Kolkata", 2);
dt.Rows.Add("Pune", 3);
dt.Rows.Add("Mumbai", 4);
dt.Rows.Add("Noida", 5);
dt.Rows.Add("Gurgaon", 6);
dt.Rows.Add("Hyderabad", 7);
dt.Rows.Add("Chennai", 8);
dt.Rows.Add("Jaipur", 8);
dt.Rows.Add("Patna", 8);
dt.Rows.Add("Ranchi", 8);

lstMultipleValues.DataSource = dt;
lstMultipleValues.DataTextField = "Text";
lstMultipleValues.DataValueField = "Value";
lstMultipleValues.DataBind();
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
// Text showed that were selected
lblTextSelected.Text = "Submitted Values: " + txtSelectedMLValues.Value;

// One can loop through the checkboxlist control to get the Values too for the text selected if required.
}
}

In 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;
}

In .ASPX

asp:UpdatePanel ID="upDefault" runat="server"
ContentTemplate
asp:Label ID="lblDescription" runat="server" Text="Label" /asp:Label
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
div
asp:Button ID="btnSubmit" runat="server" Text="Submit Selection" OnClick="btnSubmit_Click" /
asp:Label ID="lblTextSelected" runat="server" Text="" Font-Bold="true" >/asp:Label
/div
/ContentTemplate
/asp:UpdatePanel