checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果
前台代码
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>
