Dropdown list with multiple selection option in SharePoint 2010

In this post we will discuss how we can make a dropdown list with multiple selection option in SharePoint 2010 in jQuery.

Also you can check out some of the posts on:

– How to change site logo in SharePoint 2013?

– Use Gridview to Bind list data in SharePoint 2010

– Create custom list property in SharePoint list settings

The dropdown with multiple selection will look like below:

Dropdown list with multiple selection option in SharePoint 2010
Dropdown list with multiple selection option in SharePoint 2010

Below is the css code:




<style type=”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: 2px solid #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:Literal ID=”LtrMessage” runat=”server”></asp:Literal>
<table style=”padding-top: 9px”>
<tr>
<td style=”padding-bottom: 13px; font-style: normal;”>
<strong>City :</strong><span style=”color: Red; padding-left: 2px;”>*</span>
</td>
<td>
<div id=”divCustomCheckBoxList” runat=”server” onmouseover=”clearTimeout(timoutID);” onmouseout=”timoutID = setTimeout(‘HideMList()’, 750);”>
<table>
<tr>
<td align=”right” class=”style1″>
<input id=”txtSelectedMLValues” type=”text” readonly=”readonly” onclick=”ShowMList()”
style=”width: 150px;” runat=”server” />
</td>
<td align=”left” class=”style1″>
<img id=”imgShowHide” runat=”server” align=”left” onclick=”ShowMList()” src=”~/_layouts/1033/images/down-arrow.bmp” />
</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”>
<b>x</b>
</label>
</div>

<div runat=”server” title=”divCheckBoxList” id=”divCheckBoxList” class=”DivCheckBoxList”>
<asp:UpdatePanel ID=”UpdatePanel11″ runat=”server”>
<ContentTemplate>
<asp:CheckBox ID=”CheckBoxList1″ runat=”server” Text=”All” AutoPostBack=”true” OnCheckedChanged=”CheckBoxList1_CheckedChanged”>
</asp:CheckBox>
<asp:CheckBoxList ID=”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>
<script type=”text/javascript”>
var timoutID;

//This function shows the checkboxlist

function ShowMList() {
var divRef = document.getElementById(“<%=divCheckBoxList.ClientID%>”);
divRef.style.display = “block”;
var divRefC = document.getElementById(“<%=divCheckBoxListClose.ClientID%>”);
divRefC.style.display = “block”;
}

//This function hides the checkboxlist

function HideMList() {
document.getElementById(“<%=divCheckBoxList.ClientID%>”).style.display = “none”;
document.getElementById(“<%=divCheckBoxListClose.ClientID%>”).style.display = “none”;
}

var cblstTable;
var checkBoxPrefix;
var noOfOptions;
var selectedText

function FindSelectedItems(sender, textBoxID) {
cblstTable = document.getElementById(sender.id);
var flagUnchecked = 0;
var flaChecked = 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”;
}
}


function FindAllRepMgr(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>

Dropdown list with multiple selection option in SharePoint 2010
Dropdown list with multiple selection option in SharePoint 2010
Dropdown list with multiple selection option in SharePoint 2010
Dropdown list with multiple selection option in SharePoint 2010


You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply