自定义select事件

来源：互联网发布：上海java应届生招聘编辑：程序博客网时间：2024/06/04 18:01

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
.wrap{
height: 35px;
}
</style>
</head>
<body>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript">
;(function(){
var List=function(el,option){
this.wrap=el;
this.options=option||{"":'请选择'}
this._el=this._init(this.options);
var self=this;
var change=function(){
var value=self.getValue()
self._onchange(value)
}
this._el.onchange=change
}
List.prototype.setValue=function(){

}
List.prototype.getValue=function(){
return this._el.options[this._el.selectedIndex].value
}
List.prototype._init=function(options){
var sel=document.createElement('select');
sel.id=this.wrap.id+'select'
var str='';
for(var k in options){
str+='<option value="'+k+'">'+options[k]+'</option>';
}
sel.innerHTML=str;
wrap.appendChild(sel);
return sel;
}
List.prototype._onchange=function(v){
console.log(x)
}
window.list=List;
})()
window.onload=function(){
var data={"1":"星期一","2":"星期二","3":"星期三","4":"星期四","5":"星期五"}
window.dates=new list(Q('wrap'),data)
dates._onchange=function(c){
console.log(c)
}
}
function getvalue(){
console.log(dates.getValue());
}
</script>
<div class="wrap" id="wrap">
<input type="text" id="data" />
</div>
<input type="button" value="取值" onclick="getvalue()" />
</body>
</html>