多选下拉列表

效果图：

 

IE6.0上存在大家都熟知的一个Bug：div不能覆盖select控件

js code ：

Code

 

  1(function($) {
  2    $.fn.multiSelect = function(options) {
  3
  4        var opts = $.extend({}, $.fn.multiSelect.defaults, options);
  5
  6        return this.each(function() {
  7
  8            $this = $(this);
  9            $.fn.multiSelect.createSelectDiv($this.attr("id"), opts);
 10
 11        });
 12    }
 13
 14    //创建div
 15    $.fn.multiSelect.createSelectDiv = function(select_id, opts) {
 16
 17        //固定select的宽，以免被撑大
 18        $("#" + select_id).width($("#" + select_id).width());
 19
 20        //取得select的jquery对象
 21        var $obj = $("#" + select_id);
 22        //取得该select的坐标对象
 23        var offset = $obj.offset();
 24        //获取select的title值
 25        var title = $obj.attr("title") == undefined ? opts.titleName : $obj.attr("title");
 26        //        //如果是IE的话将该div往上移一个像素
 27        if ($.browser.msie) {
 28            offset.top -= 1;
 29        }
 30        offset.top += 20;
 31        //开始构建div
 32        var div_str = "<div id=" + select_id + "_div class='select_div' style='width:" + opts.width + "px;display:none;position:absolute;top:" + offset.top + "px;left:" + offset.left + "px'>";
 33        //构建iframe，用来在IE里挡住select，如果iframe参数为true的话
 34        var iframeStr = '<iframe src="javascript:false" style="display:none;position:absolute; visibility:inherit;border:0px; top:0px; left:-1px; width:' + (opts.width + 20) + '; height:100%; z-index:-1;-moz-opacity:0; filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>';
 35        if (opts.iframe) {
 36            if ($.browser.msie) {
 37                div_str += iframeStr;
 38            }
 39        }
 40
 41        div_str += "<div class='select_div_title'>" + title + "</div>";
 42        div_str += "<table class='select_div_table' id=" + select_id + "_table width=100% cellpadding=0 cellspacing=0>";
 43        //创建table内容tr和td
 44        //alert(select_id);
 45        div_table_trtd = $.fn.multiSelect.createTrTd(select_id, opts.arr);
 46        div_str += div_table_trtd + "</table><div class='select_div_bottom'><input id=" + select_id + "_ok type=button value='确定'></div></div>";
 47        //添加到页面上
 48        $(div_str).appendTo('body');
 49
 50        //如果div过高，则显示滚动条
 51        if ($("#" + select_id + "_div").height() > opts.height) {
 52            $("#" + select_id + "_div").height(opts.height);
 53            //IE这个老家伙总是要来点hack才舒服
 54            if ($.browser.msie) {
 55                $("#" + select_id + "_div .select_div_title").width($("#" + select_id + "_div").width() - 10);
 56                $("#" + select_id + "_div .select_div_bottom").width($("#" + select_id + "_div").width() - 16);
 57            }
 58        }
 59
 60        //定义打开函数
 61        $.fn.multiSelect.opener(select_id, opts);
 62        //定义div里的checkbox点击事件
 63        $.fn.multiSelect.checkboxClick(select_id, opts);
 64        //定义确定按钮的点击事件
 65        $.fn.multiSelect.okClick(select_id, opts);
 66    }
 67
 68    $.fn.multiSelect.checkboxClick = function(select_id, opts) {
 69        //获取div的jquery对象
 70        $obj = $("#" + select_id + "_div :checkbox");
 71
 72        //定义点击事件
 73        $obj.click(function() {
 74
 75            //改变背景颜色
 76            if ($(this).attr("checked")) {
 77                $(this).parent().parent().addClass("selected");
 78            }
 79            else {
 80                $(this).parent().parent().removeClass("selected");
 81            }
 82
 83            $checked_obj = $("#" + select_id + "_div :checkbox:checked");
 84
 85            var val = '';
 86            var text = '';
 87            for (var i = 0; i < $checked_obj.length; i++) {
 88                val += $checked_obj.eq(i).val() + ",";
 89                text += $checked_obj.eq(i).attr("text") + ",";
 90
 91            }
 92            val = val.substr(0, val.length - 1);
 93            text = text.substr(0, text.length - 1);
 94            if (text == "") text = opts.titleName;
 95            //把值赋给一个控件
 96            document.getElementById(opts.hiddenFieldID).value = text;
 97            if (text.length > 5 && text != opts.titleName) text = text.substr(0, 5) + "..";
 98            document.getElementById(select_id).value = text;
 99        });
100    }
101
102    //定义确定按钮的点击事件，点击后div消失
103    $.fn.multiSelect.okClick = function(select_id, opts) {
104        $("#" + select_id + "_ok").click(function() {
105            $("#" + select_id + "_div").slideUp("fast", function() {
106                $("#" + select_id).css("visibility", "visible");
107            });
108        });
109    }
110
111    //定义打开div函数
112    $.fn.multiSelect.opener = function(select_id, opts) {
113        $obj = $("#" + select_id); // + "_open"
114        $obj.click(function() {
115            //关掉所有打开的div
116            $(".select_div").slideUp("fast");
117            $("select").css("visibility", "visible");
118            if (opts.iframe) {
119                //定义iframe的css
120                if ($.browser.msie) {
121                    $("#" + select_id + "_div iframe").css("display", "block").css("height", $("#" + select_id + "_div").height());
122                }
123            }
124            else {
125                $("#" + select_id).css("visibility", "hidden");
126            }
127            $("#" + select_id + "_div").slideDown("fast");
128        });
129    }
130
131    //创建tr和td
132    $.fn.multiSelect.createTrTd = function(select_id, arr) {
133        var trtd = "";
134        var bg_class = "odd";
135        var b = arr;
136
137        for (var i = 0; i < b.length; i++) {
138
139            trtd = trtd + "<tr class='" + bg_class + "'><td>" + b[i] + "</td><td class='right_td'><input text='" + b[i] + "' type=checkbox value='" + i + "'></td></tr>";
140        }
141        return trtd;
142    }
143
144
145    $.fn.multiSelect.defaults = {
146        width: 300,
147        height: 200,
148        iframe: true,
149        titleName: ""
150    }
151
152})(jQuery);
153
154

 在页面上添加一个textbox和一个隐藏域:

     <input id="select_park1" class="CityBD_3 maall5 ListText" runat="server" type="text"

        readonly="readonly" value="-花园类型-" />

<asp:HiddenField ID="hiddenGarden" runat="server" />

同时添加脚本：

Code

 　　

 1    /**//**
 2    * 参数说明：
 3    * width：定义该多选div的宽度
 4    * height:定义该div的最大高度
 5    * iframe:定义是否启用iframe，如果有多个select，并需要盖住的话，将iframe设为true
 6    */
 7    $(document).ready(function() {
 8        $("#<%= select_park1.ClientID %>").multiSelect({
 9            width: 90, height: 300,
10            iframe: true,
11            titleName: "-花园类型-",
12            arr: new Array("入户花园", "天台花园", "露台花园"),
13            hiddenFieldID: "<%= hiddenGarden.ClientID %>"
14        });
15 });

 CSS样式：

Code
 1<style type="text/css">
 2    /**//* select div的样式 */.select_div
 3    {}{
 4        font-size: 12px;
 5        font-family: Verdana;
 6        border: 1px solid #333;
 7        overflow-y: auto;
 8    }
 9    .select_div table
10    {}{
11        border: 0px;
12        table-layout: fixed;
13    }
14    .select_div .select_div_title
15    {}{
16        padding: 5px;
17        background: #658BB2;
18        color: #fff;
19        font-weight: bold;
20        font-size: 14px;
21        white-space: nowrap;
22        height: 20px;
23    }
24    .select_div tr
25    {}{
26        font-weight: bold;
27        color: #000;
28        height: 24px;
29    }
30    .select_div .odd
31    {}{
32        background: #fff;
33    }
34    .select_div .even
35    {}{
36        background: #fff;
37    }
38    .select_div .selected
39    {}{
40        background: #D9E9FE;
41    }
42    .select_div td
43    {}{
44        padding-left: 5px;
45        white-space: nowrap;
46    }
47    .select_div .right_td
48    {}{
49        text-align: right;
50        width: 20px;
51        padding: 5px;
52    }
53    .select_div .select_div_bottom
54    {}{
55        background: #ddd;
56        padding: 8px;
57        text-align: right;
58    }
59</style>

 

Code

图片：

1/**//**下拉列表2009-05-09**/
2.ListText{}{background:url(../images/DropDown/TextBtn.jpg) no-repeat;height:20px;width:92px!important;width:84px;border:0px;line-height:20px;cursor:pointer;padding:2px 0px 0px 0px!important;padding:0px 0px 0px 8px}