基於jquery的可多選的下拉列錶框_jquery

同事在網路上的找的下拉列錶框出現位置不對的和載入慢的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: ababute>; border: 1px solid #617775;
display: none;
background: none repeat scroll 0 0 #F0F6E4;
float: left;
}
> 🎜>float: left;
}
. 🎜>padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
border-top: 1px solid black;
}
{ul
{ul
{ul
{ul
{ul
{ul
{ul
{ul

{ul
{ 🎜>list-style:none outside none;
}

HTML:

複製代碼 程式碼如下: