基于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实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
基于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文件上传类完整实例
2016/05/14 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
js实现简单计算器
2015/11/22 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python遍历numpy数组的实例
2018/04/04 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
python处理excel绘制雷达图
2019/10/18 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
项目专员岗位职责
2013/12/04 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
银行工作心得体会范文
2016/01/23 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书