基于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 相关文章推荐
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
如何使用PHP往windows中添加用户
2006/12/06 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
师德师风自查总结
2014/10/14 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书