基于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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 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
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php使用GeoIP库实例
2014/06/27 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
python爬取个性签名的方法
2018/06/17 Python
python和php哪个更适合写爬虫
2020/06/22 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
性能测试工程师的面试题
2015/02/20 面试题
计算机专业自荐信
2013/10/14 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
北体毕业生求职信
2014/02/28 职场文书
心术观后感
2015/06/11 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技