基于jquery的可多选的下拉列表框


Posted in Javascript onJuly 20, 2012

同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个。

先看效果: http://demo.3water.com/js/2012/jquery_demo/jquery_select.html

JS:

(function ($) { 
$.fn.extend({ 
MultDropList: function (options) { 
var op = $.extend({ wraperClass: "wraper", width: "150px", height: "200px", data: "", selected: "" }, options); 
return this.each(function () { 
var $this = $(this); //指向TextBox 
var $hf = $(this).next(); //指向隐藏控件存 
var conSelector = "#" + $this.attr("id") + ",#" + $hf.attr("id"); 
var $wraper = $(conSelector).wrapAll("<div><div></div></div>").parent().parent().addClass(op.wraperClass); 
var $list = $('<div class="list"></div>').appendTo($wraper); 
$list.css({ "width": op.width, "height": op.height }); 
//控制弹出页面的显示与隐藏 
$this.click(function (e) { 
$list.toggle(); 
e.stopPropagation(); 
}); 
$(document).click(function () { 
$list.hide(); 
}); 
$list.filter("*").click(function (e) { 
e.stopPropagation(); 
}); 
//加载默认数据 
$list.append('<ul><li><input type="checkbox" class="selectAll" value="" /><span>全部</span></li></ul>'); 
var $ul = $list.find("ul"); 
//加载json数据 
var listArr = op.data.split("|"); 
var jsonData; 
for (var i = 0; i < listArr.length; i++) { 
jsonData = eval("(" + listArr[i] + ")"); 
$ul.append('<li><input type="checkbox" value="' + jsonData.k + '" /><span>' + jsonData.v + '</span></li>'); 
} 
//加载勾选项 
var seledArr; 
if (op.selected.length > 0) { 
seledArr = selected.split(","); 
} 
else { 
seledArr = $hf.val().split(","); 
} 
$.each(seledArr, function (index) { 
$("li input[value='" + seledArr[index] + "']", $ul).attr("checked", "checked"); 
var vArr = new Array(); 
$("input[class!='selectAll']:checked", $ul).each(function (index) { 
vArr[index] = $(this).next().text(); 
}); 
$this.val(vArr.join(",")); 
}); 
//全部选择或全不选 
$("li:first input", $ul).click(function () { 
if ($(this).attr("checked")) { 
$("li input", $ul).attr("checked", "checked"); 
} 
else { 
$("li input", $ul).removeAttr("checked"); 
} 
}); 
//点击其它复选框时,更新隐藏控件值,文本框的值 
$("input", $ul).click(function () { 
var kArr = new Array(); 
var vArr = new Array(); 
$("input[class!='selectAll']:checked", $ul).each(function (index) { 
kArr[index] = $(this).val(); 
vArr[index] = $(this).next().text(); 
}); 
$hf.val(kArr.join(",")); 
$this.val(vArr.join(",")); 
}); 
}); 
} 
}); 
})(jQuery); 
$(document).ready(function () { 
$("#txtTest").MultDropList({ data: $("#hfddlList").val() }); 
}); 
</script>

CSS:
.wraper 
{ 
position: relative; 
} 
.list 
{ 
width: 200px; 
height: 200px; 
overflow: auto; 
position: absolute; 
border: 1px solid #617775; 
display: none; 
background: none repeat scroll 0 0 #F0F6E4; 
float: left; 
} 
.list ul li 
{ 
padding-left: 10px; 
padding-top: 2px; 
padding-bottom: 2px; 
border-top: 1px solid black; 
} 
ul 
{ 
list-style:none outside none; 
}

HTML:
<asp:HiddenField ID="hfddlList" runat="server" Value='{k:1,v:"南京"}|{k:2,v:"上海"}|{k:3,v:"扬州"}|{k:4,v:"苏州"}|{k:5,v:"无锡"}|{k:6,v:"常州"}|{k:7,v:"盐城"}|{k:8,v:"徐州"}|{k:9,v:"泰州"}|{k:10,v:"淮安"}' /> 
<div class="testContainer"> 
<br /> 
<br /> 
<br /> 
<br /> 
<div style="margin-left: 300px; height: 30px;"> 
<asp:TextBox ID="txtTest" runat="server" Width="150px"></asp:TextBox> 
<asp:HiddenField ID="hfTest" runat="server" Value="3,5" /> 
</div> 
</div>
Javascript 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 #Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 #Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 #Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 #Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 #Javascript
基于jQuery的获取标签名的代码
Jul 16 #Javascript
写自已的js类库需要的核心代码
Jul 16 #Javascript
You might like
用缓存实现静态页面的测试
2006/12/06 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
详解python3百度指数抓取实例
2016/12/12 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
结构和类有什么异同
2012/07/16 面试题
校园之星获奖感言
2014/01/29 职场文书
自我鉴定标准格式
2014/03/19 职场文书
经典团队口号
2014/06/06 职场文书
党支部对照检查材料
2014/08/25 职场文书
2014年校长工作总结
2014/12/11 职场文书
2015年技术员工作总结
2015/04/10 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android