花了两天时间用js写了个通用select,解决了所有浏览器的样式统一问题,基于JQ封装的插件,只有一个JS文件(没有CSS和图片文件),使用简单,基于原生select产生。

    兼容 IE7/8/9 ...,chrome,火狐等主流浏览器

   chrome下效果:

   

  FF下效果:

 

  IE7下效果:

 

 下面上代码:

 

/**
 * Created by zdq on 2015/5/12.

     1. 调用方法 $(".combbox").combbox(options);
     注意:这里选择的应为select元素
     默认options={height:20, //高度
                size:6,//最多显示个数
                borderColor:'#666', //边框颜色
                selectedColor:'#ccc', //选中后的背景色
                'hoverColor':'#eee'//鼠标移动的背景色
                }
     返回结果为 自定义Combbox 的对象数组,数组个数对应JQ选择器选中的dom节点个数
     以下的方法定义在自定义Combbox对象上
     操作方法:
     1.getValue()        获取当前选中的值,对应原始select的option上的value
     2.setValue(val)     设置当前的值
     3.remove(val)       删除知道的值节点
     4.removeAll()       删除所有的节点
     5.addOption(data)   添加节点;data类型可以是数组,类似[{value:'1',text:'测试1'},{value:'2',text:'测试2'}] 或者
     是单个对象,类似{value:'1',text:'测试1'}

 */
(function(window,undefined){
    $.fn.combbox=function(options){
        function Combbox(oSelect,options){
            this.oSelect=oSelect;
            this.options=options=$.extend({height:20,size:6,borderColor:'#666',selectedColor:'#ccc','hoverColor':'#eee'},options);
            var oPrent=oSelect.parentNode;
            var arrOptions=oSelect.options;
            var selectIndex=arrOptions.selectedIndex<0?0:arrOptions.selectedIndex;
            var curSelected=arrOptions[selectIndex];
            var len=oSelect.options.length;
            options.size=Math.min(oSelect.options.length,options.size);
            var height=options.size*options.height;
            var width=len<options.size?this.offsetWidth:oSelect.offsetWidth+8;
            var arrOptionsStr=['<div style="position:relative;display:inline-block;_zoom:1;*display:inline;cursor:default;font-size:14px;-webkit-user-select: none;-moz-user-select: none;-o-user-select: none;-ms-user-select: none;user-select:none;width:'+width+
            'px;"><div class="com_show"  style="position:relative;border:1px solid '+options.borderColor+';width: 100%;height:'+(options.height+1)+'px;"><span style="display:inline-block;width:'+(width-32)
            +'px;margin:0;  float: left;padding:2px 10px 2px 4px;white-space:nowrap;height:'+(options.height-4)+'px;line-height:'+(options.height-4)+'px;overflow:hidden;">'+(curSelected?curSelected.text:'')+
            '</span><a style="position: absolute;right:4px;top:'+(options.height-6)/2+'px;display:block;font-size:0;border:6px dashed transparent;border-left-width:4px;border-right-width:4px;border-top-style:solid;border-top-color:#808080;"></a> </div>'+
            '<div class="com_cb" style="display:none;z-index:99;background:#fff;position:absolute;border:1px solid '+options.borderColor+';border-top:0;width:100%;height:'+height+'px;overflow-x:hidden;overflow-y:auto;"><ul style="list-style:none;padding:0;margin:0;">'];
            for(var i= 0,len=arrOptions.length;i<len;i++){
                arrOptionsStr.push('<li value="'+arrOptions[i].value+'" style="'+((selectIndex==i)?'background-color:'+options.selectedColor+';':'')+'height:'+(options.height-4)+'px;line-height:'+(options.height-4)+'px;padding:2px 4px 2px 4px;white-space:nowrap;">'+arrOptions[i].text+'</li>');
            }
            var oThis=this;
            var newDom=$(arrOptionsStr.join('')+'</ul></div></div>').insertAfter(oSelect);
            this.length=len;
            this.optionGroup=newDom.find('ul');
            this.optionsBox=newDom.find('.com_cb')[0];
            this.oShowText=newDom.find('.com_show').click(function(ent){
                if(oThis.length==0)return;
                if(oThis.optionsBox.style.display=='block'){
                    oThis.optionsBox.style.display='none';
                }else{
                    oThis.optionsBox.style.display='block';
                    if(oThis.length>options.size){
                        if(oThis.oCurChecked){
                            var index=$(oThis.oCurChecked).index();
                            // alert(index+","+oThis.length+","+oThis.options.size+","+(oThis.length-oThis.options.size));
                            if(index<=(oThis.length-oThis.options.size)){
                                //alert(index*oThis.options.height)
                                oThis.optionsBox.scrollTop=index*oThis.options.height;
                            }else{
                                oThis.optionsBox.scrollTop=oThis.options.size*oThis.options.height;
                            }
                        }
                    }
                }
                ent.stopPropagation();
            }).find('span:eq(0)')[0];
            this.oCurChecked=newDom.find('li:eq('+selectIndex+')')[0];

            newDom.on('selectstart',function(){
                return false;
            }).find('ul').on('mouseenter','li',function(){
                if(oThis.oCurChecked!=this) {
                    this.style.backgroundColor = oThis.options.hoverColor;
                }
            }).on('mouseleave','li',function(){
                if(oThis.oCurChecked!=this){
                    this.style.backgroundColor="#fff";
                }
            }).on('click','li',function(){
                oThis.oShowText.innerText=this.innerText;
                if(oThis.oCurChecked)oThis.oCurChecked.style.backgroundColor="#fff";
                this.style.backgroundColor=oThis.options.selectedColor;
                oThis.oCurChecked=this;
                oSelect.options.selectedIndex=$(this).index();
            });
            $(document).click(function(){
                oThis.optionsBox.style.display='none';
            });

            this.oSelect.style.display='none';
        }

        Combbox.prototype.getValue=function(){
            if(  this.oCurChecked){
                return this.oCurChecked.getAttribute('value');
            }else{
                return undefined;
            }
        };
        Combbox.prototype.addOption=function(options){
            if(options instanceof Array){
                for(var i= 0,len=options.length;i<len;i++){
                    this.optionGroup.append('<li value="'+options[i].value+'" style="height:'+(this.options.height-4)+'px;line-height:'+(this.options.height-4)+'px;padding:2px 4px 2px 4px;white-space:nowrap;">'+options[i].text+'</li>');
                    this.oSelect.options.add(new Option(options[i].text,options[i].value));
                }
                this.length+=options.length;
                if(!this.oCurChecked){
                    this.setValue(options[0].value);
                }
            }else{
                this.optionGroup.append('<li value="'+options.value+'" style="height:'+(this.options.height-4)+'px;line-height:'+(this.options.height-4)+'px;padding:2px 4px 2px 4px;white-space:nowrap;">'+options.text+'</li>');
                this.oSelect.options.add(new Option(options.text,options.value));
                this.length++;
                if(!this.oCurChecked){
                    this.setValue(options.value);
                }
            }
            this.options.size=Math.min(this.length,this.options.size);
            this.optionsBox.style.height=this.options.size*this.options.height+"px";
        };
        Combbox.prototype.removeAll=function(){
            this.length=0;
            this.optionsBox.style.display='none';
            this.optionGroup.empty();
            this.oSelect.innerHTML='';
            this.oShowText.innerText= '';
            this.oCurChecked=null;
        };
        Combbox.prototype.remove=function(val){
            var arrLi=this.optionGroup.find('li[value="'+val+'"]');
            if(arrLi.length>0){
                var oLi=arrLi.filter(':eq(0)');
                this.oSelect.options.remove(oLi.index());
                oLi.remove();
                this.length--;
                if(this.oCurChecked==arrLi[0]){
                    var checkedLi=this.optionGroup.find('li:eq(0)');
                    if(checkedLi.length>0){
                        this.setValue(checkedLi[0].value);
                    }
                }

                this.options.size=Math.min(this.length,this.options.size);
                this.optionsBox.style.height=this.options.size*this.options.height+"px";
            }
        };
        Combbox.prototype.setValue=function(val){
            var arrLi=this.optionGroup.find('li[value="'+val+'"]');
            if(arrLi.length>0){
                this.oSelect.value=val;
                if(this.oCurChecked)this.oCurChecked.style.backgroundColor="#fff";
                var oLi=arrLi.filter(':eq(0)').css('backgroundColor',this.options.selectedColor);
                this.oCurChecked=oLi[0];
                this.oShowText.innerText= this.oCurChecked.innerText;
            }
        };
        Combbox.prototype.getSelectIndex=function(val){

        };
        var combboxs=this.map(function(){
            return new Combbox(this,options);
        });
        return combboxs;
    }
})(window);

 调用示例:
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<label style="vertical-align:6px;">测试0:</label>
<select id="mycombobox" class="combbox">
     <option value="1">测试111111111测试</option>
     <option value="2">测试222222222测试</option>
     <option value="3">测试333333333测试</option>
     <option value="4" selected>测试333333333测试</option>
     <option value="5">测试333333333</option>
     <option value="6">测试333333333</option>
     <option value="7">测试333333333</option>
     <option value="8">测试333333333</option>
     <option value="9">测试333333333</option>
     <option value="10">测试333333333</option>
     <option value="11">测试333333333</option>
 </select>
<select class="combbox">
    <option value="1">测试111111111测试2</option>
    <option value="2">测试222222222测试2</option>
    <option value="3">测试333333333测试2</option>
    <option value="4" selected>测试333333333测试2</option>
    <option value="5">测试333333333</option>
    <option value="6">测试333333333</option>
    <option value="7">测试333333333</option>
    <option value="8">测试333333333</option>
    <option value="9">测试333333333</option>
    <option value="10">测试333333333</option>
    <option value="11">测试333333333</option>
</select>

</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/combbox.js"></script>
<script>
    var com = $(".combbox").combbox({height: 22});

</script>
</html>