您的位置：首页 > 运维架构

checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果

2016-11-10 14:28 525 查看

前台代码

01.<html xmlns="http://www.w3.org/1999/xhtml">
02.<head runat="server">
03.    <title>下拉框实现多选</title>
04.    <script src="Jquery-1.8.3.min.js" type="text/javascript"></script>
05.    <script type="text/javascript">
06.        /*
07.         *
08.         *
09.        */
10.       $(function() {
11.           $("#<%=txtList.ClientID %>").mouseenter(function() {
12.               $("#divChkList").slideDown("fast");
13.           });
14.           $("#divMulti").mouseleave(function() {
15.               $("#divChkList").slideUp("fast");
16.           });
17.           $("#divChkList :checkbox").each(function() {
18.               $(this).click(function() {
19.                   var $txtList = $("#<%=txtList.ClientID %>");
20.                   if (this.checked) {
21.                       $txtList.val($txtList.val() + $(this).next().text()+",");
22.                   }
23.                   else {
24.                       $txtList.val($txtList[0].value.replace($(this).next().text()+',',''));
25.                   }
26.               });
27.           });
28.       });
29.    </script>
30.
31.</head>
32.<body>
33.    <form id="form1" runat="server">
34.    <input type="checkbox" id="test" value="1" title="d" />
35.    <div style="width:400px;height:300px;margin:0 auto;">
36.        <div id="divMulti">
37.            <asp:TextBox ID="txtList" runat="server" Width="100px"></asp:TextBox>
38.            <div id="divChkList" style="display: none; border: solid 1px #CCCCCC; position: fixed;
39.                z-index: 100; height: 160px; width: 100px; overflow-y: scroll; background-color: White">
40.                <asp:CheckBoxList ID="chkList" runat="server" RepeatLayout="Table" RepeatDirection="Vertical">
　　　　　　　　　　　　　　<asp:ListItem Value="12036">(12036)汉庭星空酒店管理有限公司</asp:ListItem>
<asp:ListItem Value="12036">(12036)汉庭星空酒店管理有限公司</asp:ListItem>
<asp:ListItem Value="12036">(12036)汉庭星空酒店管理有限公司</asp:ListItem>
<asp:ListItem Value="12036">(12036)汉庭星空酒店管理有限公司</asp:ListItem>
<asp:ListItem Value="12036">(12036)汉庭星空酒店管理有限公司</asp:ListItem>
<asp:ListItem Value="12036">(12036)汉庭星空酒店管理有限公司</asp:ListItem>
41.                </asp:CheckBoxList>
42.            </div>
43.        </div>
44.    </div>
45.    </form>
46.</body>
47.</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航