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>
checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果的更多相关文章
- 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能
解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...
- 使用mescroll来实现移动端页面上拉刷新， 下拉加载更多功能
* mescroll请参考官方文档 1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行) 代码如下: var mescroll = new MeS ...
- jQuery+Asp.net 实现简单的下拉加载更多功能
原来做过的商城项目现在需要增加下拉加载的功能,简单的实现了一下.大概可以整理一下思路跟代码. 把需要下拉加载的内容进行转为JSON处理存在当前页面: <script type="tex ...
- jquery完成带复选框的表格行高亮显示
jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...
- 关于JFace带复选框的树
树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用Con ...
- js之全选即点击全选标签可选择全部复选框
目标效果:网页全选功能,即点击全选标签可选择全部复选框 实现代码如下 <!DOCTYPE html> <html lang="en"> <head&g ...
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
随机推荐
- 编写IoDemo.java的Java应用程序，程序完成的功能是：首先读取text.txt文件内容，再通过键盘输入文件的名称为iodemo.txt,把text.txt的内容存入iodemo.txt
package zuoye; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcep ...
- c# 注册全局热键
//引入系统API [DllImport("user32.dll")] static extern bool RegisterHotKey(IntPtr hWnd, int id, ...
- Android程序函数 将assets文件夹下的文件复制到手机的sd卡中（包括子文件夹）
最近在做个功能是将asset文件夹下的所有文件(包括子文件)全部拷贝出来到指定目录下.所用的方法无非是用AssetManager.但是这里 有个问题是也要讲子文件夹和子文件都要拷贝出来.到网上Goog ...
- mysql避免重复插入的三种方法
在开发中,我们经常遇到这样的需求,如果插入的数据不存在就插入存在就更新(或者不做任何操作).mysql的insert就提供了此功能,不需要我们在自己的业务逻辑代码上做处理.直接用mysql提供的功能来 ...
- 发现struct proc_dir_entry内核3.10.17移到internal中去了，倒
struct proc_dir_entry 原：2.6.38.8 在#include <linux/proc_fs.h> 现：3.10.17 在fs/proc/internal.h:str ...
- Linux命令整理中...
Linux命令整理中... 最常用命令(我最近最常用的一般放在前面tipsbychsry) clear 清屏 date 显示日期 cal 显示日历 cal 2014 显示2014年的日历 shutdo ...
- [麦先生]Laravel框架实现发送短信验证
今天在做到用户注册和个人中心的安全管理时,我借助实现第三方短信平台在Laravel框架中进行手机验证的设置; 由于我们做的是一个为客户提供医疗咨询和保健品网站,所以对客户个人隐私的保护显得尤为重要, ...
- POJ 3384 Feng Shui --直线切平面
题意:房间是一个凸多边形,要在里面铺设两条半径为r的圆形地毯,可以重叠,现在要求分别铺设到哪,使地毯所占的地面面积最大. 解法:要使圆形地毯所占面积最大,圆形地毯一定是与边相切的,这样才能使尽量不重叠 ...
- AC日记——接龙游戏 codevs 1051
1051 接龙游戏 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 给出了N个单词,已经按长度排好了序.如果 ...
- java 24 - 6 GUI之 创建只能输入数字的文本框
需求: 创建一个含有标签和文本框的窗体,其中文本框只能输入数字 步骤:(大致上) 创建窗体对象 创建标签对象 创建文本框对象 把组件添加到窗体中 设置标签的监听事件,对键盘按下的数据进行监听 设置窗体 ...