本文将实现一个select代替原生的select
<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>