自定义的select

最新推荐文章于 2022-12-26 09:59:35 发布

高成浩

最新推荐文章于 2022-12-26 09:59:35 发布

阅读量1.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/gaochh01/article/details/19982599

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文将实现一个select代替原生的select

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script type="text/javascript" src="jquery.js"></script>
<style>
ul,li{
   list-style: none;
   margin:0;
   padding:0;
}
html,body{
   margin:0;
   padding:0;
}
.odp-select-container{
   position:relative;
   border:1px solid #ccc;
   height:28px;
}
.odp-select-container .odp-select-input{
   width:100%;
   height:26px;
   border-top:0px ;
   border-bottom:0px ;
   border-right:0px;
   border-left:0px;
   border-bottom:0px ;
}
.odp-select-container .odp-select-options{
   position:absolute;
   top:28.5px;
   left:-0.5px;
   border:1px solid #ccc;
   border-top:0px;
   max-height:250px;
   overflow-y:auto;
   overflow-x:hidden;
   width:100%;
   display: none;
   z-index: 10000;
}
.odp-select-container .odp-select-options li{
   height:25px;
   width:100%;
   line-height: 25px;
   color: #333333;
   background-color:#ffffff;
}
.odp-select-container .odp-select-options li:hover{
   background-color: #e5f4fe;
   color: #333333;
}
.odp-select-container .odp-select-drop{
   position:absolute;
   width:28px;
   right:0px;
   top:0px;
   height:100%;
   line-height:100%;
   border-left:1px solid #ccc;
   display: inline-block;
   background-color: white;
}
.odp-select-container .odp-select-drop div.image_1{
    border-color: #ccc transparent transparent transparent;
   border-style: solid;
   border-width: 8px 8px 0px 8px;
   width: 0;
   height: 0;
    margin:10px 6px 10px 6px;
}
.odp-select-container .odp-select-input-cover{
   position: absolute;
   width: 100%;
   height: 100%;
   left:0px;
   top:0px;
   background-color: #ccc;
   filter:alpha(opacity=1);
   -moz-opacity:0.01;
    -khtml-opacity: 0.01;
    opacity: 0.01;
}

</style>

<html>
<body>
   <div id="selectdrop" style="margin:30px;"></div>
</body>
</html>
<script>
function OdpSelct(option){
   this.opt ={
       id:'selectdrop',
       width:128,
       options:[],
       onChange:function(code,name){},
       selectVal:undefined,
       onClick:function(){}
   };
   this.opt = $.extend(this.opt,option);
   this.init();
}
OdpSelct.prototype = {
   find:function(parten){
       return parten==undefined?
       $('#'+this.opt.id):$('#'+this.opt.id).find(parten);
   },
   init:function(){
       var _this = this;
       //创建 select html
       this._createSelect();
       //创建下拉option
       this._createOptions();
       this.find('.odp-select-container').css({
           width:this.opt.width+"px"
       });
       this.find('.odp-select-input').css({
           width:(this.opt.width - 28 ) + "px"
       });
       this.find('li').die().live('click',function(){
           _this.onChange(this);
           _this.find('.odp-select-options').hide();
       });
       this.find().bind('mouseleave',function(){
           _this.find('.odp-select-options').hide();
       });
       this.find().click(function(){
           var options = _this.find('.odp-select-options');
           options.css('display')=='none'?options.show():options.hide();
           _this.opt.onClick();
       });
   },
   onChange :function(liElement){
       var code = $(liElement).attr('id');
       var name = this.getOptionName(code);
       this.find('.odp-select-input').val(name);
       this.find('input[name='+this.opt.id+']').val(code);
       this.opt.onChange(code,name);
   },
   select:function(value){
       this.find('.odp-select-input').val(this.getOptionName(value));
       this.find('input[name='+this.opt.id+']').val(value);
   },
   _replaceAll:function(str,org,target){
            return str.replace(new RegExp(org,"gm"),target);
   },
   getOptionName:function(code){
       for(var i = 0; i<this.opt.options.length;i++ ){
           var item = this.opt.options[i];
           if(item.value == code){
               return $.type(item.name)==='string'?
                       this._replaceAll(item.name,' ',''):item.name;}
       }
   },
   _createOptions:function(){
       var buf = [];
       for(var i =0; i< this.opt.options.length;i++){
           var item = this.opt.options[i];
           if(this.opt.selectVal == undefined){
               if(i == 0){
                   this.find('.odp-select-input').val(item.name);
                   this.find('input[name='+this.opt.id+']').val(item.value);
               }
           }else{
               if(item.value == this.opt.selectVal){
                   this.find('.odp-select-input').val(item.name);
                   this.find('input[name='+this.opt.id+']').val(item.value);
               }
           }
           buf.push('<li class="_i_x_o_" id="'+item.value+'">'+item.name+'</li>');
       }
       this.find('.odp-select-options').find('ul').empty()
           .append(buf.join(''));
   },
   _createSelect:function(){
       var buf = [];
       buf.push('<div class="odp-select-container">');
       buf.push('   <div>');
       buf.push('       <div class="odp-select-input-cover"> </div>');
       buf.push('       <input type="text" class="odp-select-input"/>');
       buf.push('       <input type="hidden" name="selectTest"/>');
       buf.push('   </div>');
       buf.push('   <div class="odp-select-drop"><div class="image_1"></div></div>');
       buf.push('   <div class="odp-select-options">');
       buf.push('       <ul></ul>');
       buf.push('   </div>');
       buf.push('</div>');
       this.find().empty().append(buf.join(''));
   }
};
new OdpSelct({onChange:function(code,name){alert(code+'='+name)},
   options:[{name:"test",value:234},{name:"werer",value:4345}],
   id:'selectdrop',
   width:128
});

</script>