Dropdown List with multiple selection option[SharePoint 2010]

Introduction

This Dropdown list with multiple Selection options. This Custom control dropdown of multiple Selection .in asp.net dropdown we select only one option at one time.

Dropdown with multiple selections Screen Shot

Aspx code:

<styletype="text/css">

.DivClose

    {

display: none;

position: absolute;

width: 150px;

height: 220px;

border-style: solid;

border-color: Gray;

border-width: 1px;

background-color: #F0FFFF;

    }

.LabelClose

    {

vertical-align: text-top;

position: absolute;

bottom: 0px;

font-family: Verdana;

    }

.DivCheckBoxList

    {

display: none;

background-color: White;

width: 150px;

position: absolute;

height: 200px;

overflow-y: auto;

overflow-x: hidden;

border-style: solid;

border-color: Gray;

border-width: 1px;

width: 150px;

    }

.CheckBoxList

    {

position: relative;

width: 150px;

height: 10px;

overflow: scroll;

font-size: small;

    }

.Maintitle

    {

text-align: left;

margin: 0em;

color: #00008B;

font-size: large;

padding-bottom: 16px;

border-bottom: 2pxsolid#A9A9A9;

margin-bottom: 10px;

white-space: nowrap;

    }

.headers

    {

text-align: left;

padding-right: 10px;

    }

.numbers

    {

text-align: right;

padding-right: 12px;

    }

.textData

    {

text-align: left;

padding-right: 10px;

    }

.numbersHeader

    {

width: 80px;

    }

.numbersfooter

    {

background-color: #d2d0d0;

color: #000000;

    }

.SGridView

    {

width: 100%;

    }

.style1

    {

height: 30px;

    }

</style>

<asp:LiteralID="LtrMessage"runat="server"></asp:Literal>

<tablestyle="padding-top: 9px">

<tr>

<tdstyle="padding-bottom: 13px; font-style: normal;">

<strong>City :</strong><spanstyle="color: Red; padding-left: 2px;">*</span>

</td>

<td>

<divid="divCustomCheckBoxList"runat="server"onmouseover="clearTimeout(timoutID);"

onmouseout="timoutID = setTimeout('HideMList()', 750);">

<table>

<tr>

<tdalign="right"class="style1">

<inputid="txtSelectedMLValues"type="text"readonly="readonly"onclick="ShowMList()"

style="width: 150px;"runat="server"/>

</td>

<tdalign="left"class="style1">

<imgid="imgShowHide"runat="server"align="left"onclick="ShowMList()"src="~/_layouts/1033/images/down-arrow.bmp"/>

</td>

</tr>

<tr>

<tdcolspan="2"class="DropDownLook">

<div>

<divrunat="server"id="divCheckBoxListClose"class="DivClose">

<labelrunat="server"onclick="HideMList();"class="LabelClose"id="lblClose">

<b>x</b>

</label>

</div>

<divrunat="server"title="divCheckBoxList"id="divCheckBoxList"class="DivCheckBoxList">

<asp:UpdatePanelID="UpdatePanel11"runat="server">

<ContentTemplate>

<asp:CheckBoxID="CheckBoxList1"runat="server"Text="All"AutoPostBack="true"OnCheckedChanged="CheckBoxList1_CheckedChanged">

</asp:CheckBox>

<asp:CheckBoxListID="lstMultipleValues"runat="server"Width="250px"CssClass="CheckBoxList">

</asp:CheckBoxList>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</div>

</div>

</td>

<td>

</td>

</tr>

</table>

<br/>

<br/>

<div>

</div>

<div>

<scripttype="text/javascript">

vartimoutID;

//This function shows the checkboxlist

functionShowMList() {

vardivRef = document.getElementById("<%=divCheckBoxList.ClientID%>");

divRef.style.display = "block";

vardivRefC = document.getElementById("<%=divCheckBoxListClose.ClientID%>");

divRefC.style.display = "block";

        }

//This function hides the checkboxlist

functionHideMList() {

document.getElementById("<%=divCheckBoxList.ClientID%>").style.display = "none";

document.getElementById("<%=divCheckBoxListClose.ClientID%>").style.display = "none";

        }

varcblstTable;

varcheckBoxPrefix;

varnoOfOptions;

varselectedText

functionFindSelectedItems(sender, textBoxID) {

cblstTable = document.getElementById(sender.id);

varflagUnchecked = 0;

varflaChecked = 0;

checkBoxPrefix = sender.id + "_";

noOfOptions = cblstTable.rows.length;

selectedText = "";

for (i = 0; i <noOfOptions; ++i) {

if (document.getElementById(checkBoxPrefix + i).checked) {

flag = 1;

if (selectedText == "")

selectedText = document.getElementById

                                   (checkBoxPrefix + i).parentNode.innerText;

else

selectedText = selectedText + "," +

document.getElementById(checkBoxPrefix + i).parentNode.innerText;

                }

            }

for (i = 0; i <noOfOptions; ++i) {

if (document.getElementById(checkBoxPrefix + i).checked == false) {

document.getElementById("<%=CheckBoxList1.ClientID%>").checked = false;

                }

if (document.getElementById(checkBoxPrefix + i).checked == true) {

flagUnchecked = 1;

flaChecked = flaChecked + 1;

                }

            }

document.getElementById(textBoxID.id).value = selectedText;

if (flagUnchecked == 0) {

document.getElementById(textBoxID.id).value = "Select City";

            }

if (flaChecked == noOfOptions) {

document.getElementById("<%=CheckBoxList1.ClientID%>").checked = true;

document.getElementById(textBoxID.id).value = "All City";

            }

        }

functionFindAllRepMgr(sender, textBoxID) {

if (document.getElementById("<%=CheckBoxList1.ClientID%>").checked == true) {

for (i = 0; i <noOfOptions; ++i) {

var raw = document.getElementById(checkBoxPrefix + i).rawValue = null;

var raw1 = document.getElementById(checkBoxPrefix + i).checked = true;

document.getElementById(checkBoxPrefix + i).checked == true;

                }

document.getElementById(textBoxID.id).value = "All City";

            }

if (document.getElementById("<%=CheckBoxList1.ClientID%>").checked == false) {

for (i = 0; i <noOfOptions; ++i) {

var raw = document.getElementById(checkBoxPrefix + i).rawValue = null;

var raw1 = document.getElementById(checkBoxPrefix + i).checked = false;

document.getElementById(checkBoxPrefix + i).checked == false;

                }

document.getElementById(textBoxID.id).value = "Select City";

            }

        }

</script>

</div>

C# :Cs.code

Summary

In this Article we  Explore  multiple Selection options and all give all selection option also.create multiple Selection options drop in SharePoint 2010