实现 DropDownList的CheckBox多选

1.css文件
        .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:Red;
            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;

        }

2.js文件

var timoutID;


//This function shows the checkboxlist
function ShowMList() {
    var divRef = document.getElementById("divCheckBoxList");
    var divClose = document.getElementById("divCheckBoxListClose");
    if (divRef.style.display == "none") {
        divRef.style.display = "block";
    }
    else {
        divRef.style.display = "none";
    }
    if (divClose.style.display == "none") {
        divClose.style.display = "block";
    }
    else {
        divClose.style.display = "none";
    }
}


//This function hides the checkboxlist
function HideMList() {
    document.getElementById("divCheckBoxList").style.display = "none";
    document.getElementById("divCheckBoxListClose").style.display = "none";
}


//This function finds the checkboxes selected in the list and using them,
//it shows the selected items text in the textbox (comma separated)
function FindSelectedItems(sender, textBoxID) {
    var cblstTable = document.getElementById(sender.id);
    var checkBoxPrefix = sender.id + "_";
    var noOfOptions = cblstTable.rows.length;
    var selectedText = "";
    var hdnItemKey="";
    for (i = 0; i < noOfOptions; ++i) {
        if (document.getElementById(checkBoxPrefix + i).checked) {
            hdnItemKey =hdnItemKey + document.getElementById
                                   (checkBoxPrefix + i).value + "," ;
            if (selectedText == "")
                selectedText = document.getElementById
                                   (checkBoxPrefix + i).parentNode.innerText;
            else
                selectedText = selectedText + "," +
                 document.getElementById(checkBoxPrefix + i).parentNode.innerText;
        }
    }
    document.getElementById(textBoxID.id).value = selectedText;
    $("#hdnItemKey").val(hdnItemKey);
}

3.html

<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:ListItem Value="0" Text="短信"></asp:ListItem>
                            <asp:ListItem Value="1" Text="邮件"></asp:ListItem>
                            </asp:CheckBoxList>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>