JS插件——自定义下拉框

HTML的原生select标签，很多东西改不了，限制太大，不同的浏览器显示的样式还不一样，尤其是当需要兼容IE7、IE8时问题更多，想做一个美观的下拉框，最终还是得自定义来实现。
效果图：

这里没有做过多的美化，需求就是要这么个简洁的。当然，大小、颜色、箭头图标等等只要能看见的都可以修改，只需要改CSS就OK，这里就不展示了。

思路：
通过ul、li标签来仿下拉框，CSS控制样式，JS封装插件。

<span  style="margin-left:6px;margin-right:6px;">
                <ul class="nav off">
                    <li><span data-role="select-able"><span class="arraw"><s>&nbsp;</s>&nbsp;</span><span class="text text-top">全部</span>
                    </span>
                        <ul class="scroll-bar sub sub1" style="border-top: 0;">
                        </ul>
                    </li>
                </ul>
</span>

CSS控制样式

.nav{background-color:#fff;display:inline-block; width:50px; height:28px; line-height:28px;border:solid 1px black;*zoom: 1;*display: inline; text-align:left; vertical-align:middle; cursor:pointer;}
.nav > li{
 height:30px; line-height:30px;vertical-align:middle; max-height:30px; *zoom: 1;*display: inline; }
.nav > li > span{
 vertical-align:middle; padding:0; white-space: nowrap;}
.nav > li > span > .text
{
    position: absolute;
    background-color: transparent;
    clear:both;
    display:block;
    margin-left:3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style:normal;
    font-weight:normal;
    color:black;
    font-family:"微软雅黑 Regular", "微软雅黑";
    font-size:13px;
    float:left;
    width:47px;
    height: 28px;
}
.nav > li > span > .arraw
{
    clear:both;
    display:block;
    width:20px;
    height:28px;
    line-height:28px;
    float:right;
    vertical-align:middle;
    text-align:center;

}

.nav > li > span > .arraw > s
{
    display:block;
    background:url(../image/selectArrow.png) no-repeat 0 0;
    width:15px;
    height:10px;
    margin-top:12px;
}

.nav.off > li > span > .arraw > s
{
    display:block;
    background:url(../image/selectArrow.png) no-repeat 0 0;
    width:15px;
    height:10px;
    /*line-height:9px;*/
    margin-top:12px;
}

.sub
{
    background-color:#fff;
    width:110px;
    position: fixed;
    overflow: hidden;
    max-height: 900px;
    overflow-y: auto;
    border: 1px solid black;
    z-index: 50;
    color:#fff;
}
.sub li
{

    cursor:pointer;
    height:20px;
    line-height:20px;
    margin-left: 0;
    vertical-align:middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style:normal !important;
    font-weight:normal !important;
    color:black;
    font-family:"微软雅黑 Regular", "微软雅黑";
    font-size:13px;
}
.sub li:hover
{
    background-color:#1698d6;
    color:#ffffff;
}

.sub li span{vertical-align:middle; padding:0px; white-space: nowrap;}
.sub li span .text
{
    clear:both;
    display:block;
    margin-left:3px;
    overflow: hidden;

    float:left;
}

.sub li span .arraw
{
    clear:both;
    display:block;
    width:20px;
    height:30px;
    line-height:30px;
    float:right;
    vertical-align:middle;
    text-align:center;
}

.sub li span .arraw s
{
    display:block;
    background:url(../image/selectArrow.png) no-repeat -10px 0px;
    width:15px;
    height:10px;
    /*line-height:7px;*/
    margin-top:12px;
}

.off .sub
{
    display:none;
}

JS封装插件

;(function($,window,document,undefined){

        /*
    *定义Select构造函数
    */
    var Select=function(ele,opt){
        this.$element=ele,
        this.defaults={
            Items:undefined,//下拉框绑定的数据源 Key Value对象
            SelectedValue:undefined,
            SelectedValueName:undefined,
            SelectedLevel:undefined,
            SelectChanged:undefined
        },
        this.options=$.extend({},this.defaults,opt)
    }

    Select.prototype={
        //初始化
        init:function(){
            var $this=this;
            if($this.SelectedValue==null
            ||$this.SelectedValue==undefined)
                $this.SelectedValue="";
            $this.$element.attr("data-role","select");
            $this.BindHideEvent();

            if($this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]').length<1){
                $('<ul class="scroll-bar sub" style="display:none;" data-sub-select-for="'+$this.$element.attr("data-id")+'"></ul>').insertAfter($this.$element)
                .css({'overflow-y:':'auto'})
                .attr('data-id','content'+$this.$element.attr('data-id'));
            }else{
                $this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]')
                .css({'overflow-y:':'auto'})
                .attr('data-id','content'+$this.$element.attr('data-id'));
            }

            return this.$element.each(function(){
                var $select=$(this);
                $this.BindItems($select);
                $this.InitShowEvent($select);  
                $select=null;
            });
        },

        BindItems:function($select){
            var $this=this;
            var $ul=$select.find("ul.sub:first");
            $select.attr("data-selected-value","");
            $ul.empty()
            .width($this.$element.width())
            .css({'overflow-y:':'auto'})
            .attr('data-id','content'+$this.$element.attr('data-id'));

            var items=$this.options.Items;
            if(items==undefined||items==null||items.length<1)return;
            for(var i=0;i<items.length;++i){
                var data=items[i];
                var $li=$("<li class=\"\"></li>");
                $li.attr("data-id",data.Id);
                $li.attr("data-level",0);
                $li.attr("title",data.Name);
                $li.attr("data-children",JSON.stringify(data.Children));
                if(data.Children!=null&&data.Children.length>0){
                    $li.html("<span><span class=\"arraw\"><s>&nbsp;</s>&nbsp;</span><span class=\"text\">"+data.Name+"</span></span>"); 
                }
                else{
                    $li.html("<span><span class=\"text\">"+data.Name+"</span></span>");
                }
                $ul.append($li);
                $li.unbind("mousedown").mousedown(function(){
                    $this.HideUL();
                    $this.$element.attr("data-selected-level",$(this).attr("data-level"));
                    $this.$element.attr("data-selected-value",$(this).attr("data-id")).find("li>span>.text-top").text($(this).find(".text").text());
                    $this.RaiseSelectChanged($(this).attr("data-level"),$(this).attr("data-id"));
                });

                if(data.Children!=null&&data.Children.length>0){
                    $li.unbind("mouseenter").mouseenter(function(){
                        var offset=$(this).offset();

                        var $ul2=$this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]:first').empty();
                        var list=JSON.parse($(this).attr("data-children"));
                        if(list==null)return;

                        for(var j=0;j<list.length;++j)
                        {
                            var data2=list[j];
                            var $li2=$("<li class=\"\"></li>");
                            $li2.attr("data-id",data2.Id);
                            $li2.attr("data-level",1);
                            $li2.attr("title",data2.Name);
                            $li2.html("<span><span class=\"text\">"+data2.Name+"</span></span>");
                            $ul2.append($li2);
                            $li2.unbind("mousedown").mousedown(function(){
                                $this.HideUL();
                                $this.$element.attr("data-selected-level",$(this).attr("data-level"));
                                $this.$element.attr("data-selected-value",$(this).attr("data-id")).find("li>span>.text-top").text($(this).find(".text").text());

                                $this.RaiseSelectChanged($(this).attr("data-level"),$(this).attr("data-id"));
                            });

                            $li2=null;
                            data2=null;
                        }
                        list=null;

                        if($ul2.height()>$(window).height()-20){
                            $ul2.height($(window).height()-20);
                        }

                        if(offset.top+$ul2.height()>$(window).height()){
                            $ul2.css({left:(offset.left+$ul.width()-25)+'px',top: 20+'px' }).show();
                        }else{
                            $ul2.css({left:(offset.left+$ul.width()-25)+'px',top: offset.top+'px' }).show();
                        }

                        $ul2=null;
                    });
                }else{
                    $li.unbind("mouseenter").mouseenter(function(){
                        $this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]:first').hide();
                    });
                }

                data=null;
                $li=null;
            }


            if($this.SelectedValue==undefined||$this.SelectedValue==null||$this.SelectedValue.length<1){
                $select.attr("data-selected-level","0");
                $select.attr("data-selected-value",items[0].Id).find("li>span>.text-top").text(items[0].Name);
            }else{
                $select.attr("data-selected-level",$this.SelectedLevel);
                $select.attr("data-selected-value",$this.SelectedValue).find("li>span>.text-top").text($this.SelectedValueName);
            }

            $this.options.Items=null;          
        },
        //初始化显示事件
        InitShowEvent:function($select){
            var $this=this;
            $select.find("li>span[data-role=\"select-able\"]").unbind("click").click(function(e){
                if($select.hasClass("off")){
                    var offset=$select.offset();

                    var $ul=$select.find("ul.sub:first");
                    if(offset.top+$select.height()+$ul.height()>$(document).height()-offset.top-$select.height()-20){
                        $ul.height($(document).height()-offset.top-$select.height()-20);
                    }
                    $ul=null;

                    $select.find("ul.sub").css({ left: offset.left, top: offset.top+$select.height() });
                    $select.removeClass("off");

                }else{
                    $this.HideUL();
                }
                e.stopPropagation();
            });
        },
        //绑定隐藏事件
        BindHideEvent:function(){
            var $this=this;
            if(typeof($this.$element.attr("data-id"))=="undefined"){
                $this.$element.attr("data-id",$this.guid());
            }

            if(typeof($(document).attr('select_'+$this.$element.attr('data-id')))=="undefined"){
                $(document).attr('select_'+$this.$element.attr('data-id'),'');
                $(document).bind("mousedown",function(event){
                    var node = event.target;
                    if(typeof($(node).attr('data-id'))!='undefined'){
                        if($(node).attr('data-id')=='content'+$this.$element.attr('data-id')){
                            event.stopPropagation();
                            return;
                        }
                    }
                    $this.HideUL();
                });
            }
        },
        //隐藏
        HideUL:function(){
            var $this=this;
            $this.$element.removeClass("off").addClass("off").parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]').eq(0).empty().hide();
        },
        //选中的值修改时触发
        RaiseSelectChanged:function(level,selectedValue){
            if(this.options.SelectChanged==undefined||this.options.SelectChanged==null)return;
            this.options.SelectChanged(level,selectedValue);
            return;
        }
    }

    /*
    *封装为Select插件
    */
    $.fn.select=function(options){

        //创建Beautifier的实体
        var obj = new Select(this, options);

        //调用其方法
        return obj.init();
    };

    /*
    *获取下拉框选中的值
    */
    $.fn.selectedValue=function(){
        return this.attr("data-selected-value");
    };


})(jQuery,window,document);

初始化下拉框：

$(".nav.off").select({
        Items:[{"Id":"A","Name":"A","":"Children"},{"Id":"B","Name":"B","":"Children"},{"Id":"C","Name":"C","":"Children"}],
        SelectedValue:"B",
        SelectedValueName:"B"
        SelectChanged:function(level,selectedValue){
            //code
        }
    });