select几乎我们都会碰到，而默认的select下拉框很难看。而且各个浏览器的SELECT下拉框的默认样式都不一样，可能在CHROME里很美观，但是一到IE就丑爆了。这里我们用jQuery来模拟Select下拉框。

jQuery-select

HTML代码

<div class="selectContainer">  
            <span class="selectOption gray">点击选择下拉框内容</span>  
            <ul class="selectMenu">  
                <li>江西省</li>  
                <li>广东省</li>  
                <li>江苏省</li>  
                <li>河北省</li>  
                <li>湖南省</li>  
            </ul>  
            <span class="shows"></span>  
 </div>

CSS代码

/* ---- Select ----*/  
.selectContainer{position:relative; width:262px; display:inline-block; _display:inline; _zoom:1; z-index:1000; background:#FFF; border:1px solid #CCC}  
.selectContainer input{}  
.selectContainer .selectOption{min-width:180px; padding:0 5px; line-height:25px; height:25px; white-space:nowrap; overflow:hidden;border:none; width:250px; z-index:1000}  
.selectContainer .shows{width:20px; height:20px; position:absolute; right:2px; top:2px; background:url(images/select-ico.gif) no-repeat center center}  
.selectContainer ul{position:absolute; width:100%; top:25px; left:-1px; border-bottom:1px solid #CCC; display:none;}  
.selectContainer ul li{padding:0 5px; border:1px solid #CCC; border-bottom:1px solid #EEE; border-top:none; line-height:25px; width:252px; background:#FFF; cursor:pointer}  
.selectContainer ul li:hover{background:#F5F5F5}  

.selectContainer ul.dis{display:block!important;}  
.selectContainer ul.undis{display:noneimportant;}  
.zIndex{z-index:10000!important}  
.selectContainer .gray{color:#DDD}

jQuery代码

使用前记得引入jQuery

(function($){  
  
    jQuery.fn.select = function(options){  
        return this.each(function(){  
            var $this = $(this);  
            var $shows = $this.find(".shows");  
            var $selectOption = $this.find(".selectOption");  
            var $el = $this.find("ul > li");  
                                      
            $this.click(function(e){  
                $(this).toggleClass("zIndex");  
                $(this).children("ul").toggleClass("dis");  
                e.stopPropagation();  
            });  
              
            $el.bind("click",function(){  
                var $this_ = $(this);  
                   
                $this.find("span").removeClass("gray");  
                $this_.parent().parent().find(".selectOption").text($this_.text());  
            });  
              
            $("body").bind("click",function(){  
                $this.removeClass("zIndex");  
                $this.find("ul").removeClass("dis");      
            })  
              
        //eahc End    
        });  
          
    }  
      
})(jQuery);   
    $(".selectContainer").select();  

Demo演示