多选下拉列表

效果图：

 

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

js 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        });
    }

    //定义确定按钮的点击事件，点击后div消失
    $.fn.multiSelect.okClick = function(select_id, opts) {
        $("#" + select_id + "_ok").click(function() {
            $("#" + select_id + "_div").slideUp("fast", function() {
                $("#" + select_id).css("visibility", "visible");
            });
        });
    }

    //定义打开div函数
    $.fn.multiSelect.opener = function(select_id, opts) {
        $obj = $("#" + select_id); // + "_open"
        $obj.click(function() {
            //关掉所有打开的div
            $(".select_div").slideUp("fast");
            $("select").css("visibility", "visible");
            if (opts.iframe) {
                //定义iframe的css
                if ($.browser.msie) {
                    $("#" + select_id + "_div iframe").css("display", "block").css("height", $("#" + select_id + "_div").height());
                }
            }
            else {
                $("#" + select_id).css("visibility", "hidden");
            }
            $("#" + select_id + "_div").slideDown("fast");
        });
    }

    //创建tr和td
    $.fn.multiSelect.createTrTd = function(select_id, arr) {
        var trtd = "";
        var bg_class = "odd";
        var b = arr;

        for (var i = 0; i < b.length; i++) {

            trtd = trtd + "<tr class='" + bg_class + "'><td>" + b[i] + "</td><td class='right_td'><input text='" + b[i] + "' type=checkbox value='" + i + "'></td></tr>";
        }
        return trtd;
    }


    $.fn.multiSelect.defaults = {
        width: 300,
        height: 200,
        iframe: true,
        titleName: ""
    }

})(jQuery);

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

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

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

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

同时添加脚本：

 　　

 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,
            iframe: true,
            titleName: "-花园类型-",
            arr: new Array("入户花园", "天台花园", "露台花园"),
            hiddenFieldID: "<%= hiddenGarden.ClientID %>"
        });
 });

 CSS样式：

 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
    {}{
        border: 0px;
        table-layout: fixed;
    }
    .select_div .select_div_title
    {}{
        padding: 5px;
        background: #658BB2;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        white-space: nowrap;
        height: 20px;
    }
    .select_div tr
    {}{
        font-weight: bold;
        color: #000;
        height: 24px;
    }
    .select_div .odd
    {}{
        background: #fff;
    }
    .select_div .even
    {}{
        background: #fff;
    }
    .select_div .selected
    {}{
        background: #D9E9FE;
    }
    .select_div td
    {}{
        padding-left: 5px;
        white-space: nowrap;
    }
    .select_div .right_td
    {}{
        text-align: right;
        width: 20px;
        padding: 5px;
    }
    .select_div .select_div_bottom
    {}{
        background: #ddd;
        padding: 8px;
        text-align: right;
    }
</style>

 

图片：

/**//**下拉列表2009-05-09**/
.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}