可多选的下拉列表框

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

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("<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").hide();
                            $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>

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:

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