基于jquery的可多选的下拉列表框-创新互联

同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG，反正多选下拉列表框实现也很简单，与其看那些结构混乱的代码，不如自己重新实现一个。

先看效果：

JS:
文章来自 codego.net 请看源代码:
(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 < listArr.length; 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:
文章来自 codego.net 请看源代码:
.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:
文章来自 codego.net 请看源代码:

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

为江永等地区用户提供了全套网页设计制作服务，及江永网站建设行业解决方案。主营业务为网站制作、成都网站建设、江永网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
分享名称：基于jquery的可多选的下拉列表框-创新互联
本文链接：http://cqcxhl.com/article/cogeci.html