基于jquery的可多选的下拉列表框

　　(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>

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

　　}

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