前台代码

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>

checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果的更多相关文章

  1. 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

    解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...

  2. 使用mescroll来实现移动端页面上拉刷新， 下拉加载更多功能

    * mescroll请参考官方文档 1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行) 代码如下: var mescroll = new MeS ...

  3. jQuery+Asp.net 实现简单的下拉加载更多功能

    原来做过的商城项目现在需要增加下拉加载的功能,简单的实现了一下.大概可以整理一下思路跟代码. 把需要下拉加载的内容进行转为JSON处理存在当前页面: <script type="tex ...

  4. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  5. 关于JFace带复选框的树

    树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用Con ...

  6. js之全选即点击全选标签可选择全部复选框

    目标效果:网页全选功能,即点击全选标签可选择全部复选框 实现代码如下 <!DOCTYPE html> <html lang="en"> <head&g ...

  7. 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单

    jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...

  8. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  9. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

随机推荐

  1. MYSQL-GroupCommit

    组提交(group commit)是MYSQL处理日志的一种优化方式,主要为了解决写日志时频繁刷磁盘的问题.组提交伴随着MYSQL的发展不断优化,从最初只支持redo log 组提交,到目前5.6官方 ...

  2. SQL 扩展事件

    在本篇,我通过使用新建“Session ”对话框来创建新的扩展事件会话.定义一个自己的扩展事件,动作和谓词,并且发布一个以收集事件数据为目的的会话. 首先从UI开始 在SQLServer2008R2以 ...

  3. sql server 基础教程[温故而知新三]

    子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...

  4. 关于《Windows程序设计（第五版）》中一个实例程序的疑问

    最近一直在看Charlse Petzold的<Windows程序设计>,作为一个新得不能再新的新手,只能先照着书的抄抄源码了,之前的例子一直都很正常,但昨天遇到一个很诡异的BUG. 先看实 ...

  5. Linux rpmbuild命令

    一.简介 rpmbuild命令用于创建软件的二进制包和源代码包. 二.选项 参考:http://blog.sina.com.cn/s/blog_4ba5b45e0102e5r2.html http:/ ...

  6. 使用virt-manager创建和管理虚拟机

    1.虚拟机管理程序和虚拟机管理 一个服务器上只安装单一操作系统的时代已经过去,单个服务器可通过安装多个虚拟机来运行不同操作系统.虚拟机的大量使用减少了所需的服务其硬件,降低了服务器的功耗,但却带来了另 ...

  7. spring注入静态成员变量提示invalid setter method

    果然还是不够细心啊,被坑一晚上.. 一个极其简单的小程序,但是需要通过xml文件配置注入一个值,唯一的特别是要注入的属性是类中的静态成员变量.. 如下,然后自动生成get和set方法..坑就从此开始了 ...

  8. 如何把报表放到网页中显示（Web页面与报表简单集成例子）

    1.问题描述 现在用户开发的系统基本上趋向于BS架构的浏览器/服务器模式,这些系统可能由不同的语言开发,如HTML.ASP.JSP.PHP等,因此需要将制作好的报表嵌入到这些页面中. FineRepo ...

  9. .Net程序员之Python基础教程学习----字典的使用 [Third Day]

      今天学习了字典的使用, 所谓的字典其实就是键值对数据, 一个字典里面有唯一的Key对应一个value,Key是唯一的,Value不唯一. 在.net添加相同的Key会报错,在Python,若出现相 ...

  10. 单元测试实战 - 如何使用Eclipse

    一.Eclipse工具的使用 1. 进入官网: http://www.eclipse.org  ,点击download,根据系统版本选择自己需要的版本,下载之后,会得到一个zip文件,将这个文件解压到 ...