DropDown List With Multiple Selection Option in SharePoint 2010

Introduction

This article shows how to create a DropDown list with multiple selection options. This custom control DropDown allows multiple selections. In an ASP.Net DropDown we select only one option at a time.

DropDown with multiple selections Screen Shot

Dropdown with multiple selections

Aspx 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>

C#: Cs.code

CS code