将事件动态的赋予自定义下拉列表框

将事件动态的赋予自定义下拉列表框

< html >
     < head >
         < title > test </ title >
     </ head >
     < body >
         < select  id ="mySelect" >
             < option  value ="1" > 地球 </ option >
             < option  value ="2" > 火星 </ option >
             < option  value ="3" > 木卫二 </ option >
             < option  value ="4" > 冥王星 </ option >
             < option  value ="5" > 参宿四 </ option >
             < option  value ="6" > 人马座 </ option >
         </ select >
     </ body >
</ html >

< script  language ="javascript" >
<!--
window.onload=function(){
    var listBox=new ListBox("mySelect");
    
}

function $(id){
    return document.getElementById(id);
}

//-- 类构造函数
function ListBox(id){
    this.id=id;
    this.init();    
}
//--类的初始化函数，将控件的onchange事件交给类的changeEvent事件处理
ListBox.prototype.init=function(){
    var ctrl=$(this.id);
    var me=this;
        
    ctrl.onchange=function(){
        me.changeEvent();
    }
    
}
// onchange事件产生时弹出下拉列表控件的值
ListBox.prototype.changeEvent=function(){
    var ctrl=$(this.id);
    alert(ctrl.value);
}
//-->
</ script >