基于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 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
js图片切换具体实现代码
Oct 13 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
基于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
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
JS中的多态实例详解
2017/10/15 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
python开发中module模块用法实例分析
2015/11/12 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python excel多行合并的方法
2020/12/09 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
幼儿园教育教学反思
2014/01/31 职场文书
党员批评与自我批评
2014/02/12 职场文书
活动倡议书范文
2014/05/13 职场文书
营销总监岗位职责
2014/09/16 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
致短跑运动员加油稿
2015/07/21 职场文书