php下拉列表怎么多选框,基于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("

var $list = $('

$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:

.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: