首页 > 代码库 > dropdownlist中的Checkbox,可控制是否postback

dropdownlist中的Checkbox,可控制是否postback

1, css部分

    <style>
    .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:White;
         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;
}

    </style>

2,js

    <script type="text/javascript">
        var timoutID;

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

        //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 = "";
            for (i = 0; i < noOfOptions; ++i) {
                if (document.getElementById(checkBoxPrefix + i).checked) {
                    if (selectedText == "")
                        selectedText = document.getElementById
                                   (checkBoxPrefix + i).parentNode.innerText;
                    else
                        selectedText = selectedText + "," +
                 document.getElementById(checkBoxPrefix + i).parentNode.innerText;
                }
            }
            document.getElementById(textBoxID.id).value = http://www.mamicode.com/selectedText;
        }
        // Append an event to the checkboxes in the list


</script>

3,html

<div id="divCustomCheckBoxList" runat="server" onm ouseover="clearTimeout(timoutID);"
         onm ouseout="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="http://www.mamicode.com/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" AutoPostBack="true"
                          Width="250px" CssClass="CheckBoxList"
                             onselectedindexchanged="lstMultipleValues_SelectedIndexChanged">
                          <asp:ListItem Value="http://www.mamicode.com/0">ww</asp:ListItem>
                          <asp:ListItem Value="http://www.mamicode.com/2">qq</asp:ListItem>
                          <asp:ListItem Value="http://www.mamicode.com/3">bv</asp:ListItem>
                          <asp:ListItem Value="http://www.mamicode.com/4">nn</asp:ListItem></asp:CheckBoxList>
                     </div>
                 </div>
            </td>
        </tr>
    </table>
</div>

dropdownlist中的Checkbox,可控制是否postback