在网友的使用时，出现一些问题，更新如下：

1>在.list加入    z-index:100000;

2>将wraper中的样式position:relative删除

3>$this.click(function (e) {

      $(".list").hide();//此句新添加的

      $list.toggle();

      e.stopPropagation();

  });加入$(".list").hide();

 

这次更新的东西，一会JS有用一会没用,疼。。。

(UL样式与博客园中的冲突，所以看起起怪怪的)

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

先看效果：

 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").hide();                            $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        {
                        }        .list        {
                 width: 200px;            height: 200px;            overflow: auto;            position: absolute;            border: 1px solid #617775;            display: none;            background: none repeat scroll 0 0 #F0F6E4;            float: left;            z-index: 1000000;        }        .list ul li        {
                 padding-left: 10px;            padding-top: 2px;            padding-bottom: 2px;            border-top: 1px solid black;        }ul{
         list-style:none outside none;    }

HTML: