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
