同事在网上的找的下拉列表框出现位置不对的和加载慢的bug，反正多选下拉列表框实现也很简单，与其看那些结构混乱的代码，不如自己重新实现一个。
先看效果： http://demo.jb51.net/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(
).parent().parent().addclass(op.wraperclass);
var $list = $('
').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('全部');
var $ul = $list.find(ul);
//加载json数据
var listarr = op.data.split(|);
var jsondata;
for (var i = 0; i jsondata = eval(( + listarr[i] + ));
$ul.append('' + jsondata.v + '');
}
//加载勾选项
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() });
});
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:
复制代码 代码如下: