javascript三級のプルダウン選択メニューLevelsオブジェクト

JavaScript:

 
  
 
  <br>var level1 = ["Beijing", "GuangZhou", "ShangHai"]; 
  <br>var level2 = [["ZhaoYang", "TianTan", "GuGong"], ["Tianhe", "Panyu"], ["PuDong", "PuXi"]]; 
  <br>var level3 = [[["TianShan", "HuangShan"], ["TianTan1", "TianTan2"], ["GuGong1", "GuGong2", "GuGong3", "GuGong4"]], [["TianHe1", "TianHe2"], ["PanYu1", "PanYu2"]], [["PuDong1", "PuDong2"], ["PuXi1", "PuXi2"]]]; 
  <br>var Levels = { 
  <br>fL: null,//     select DOM   
  <br>sL: null, 
  <br>tL: null, 
  <br>l1: null, 
  <br>l2: null, 
  <br>l3: null, 
  <br>$: function(id){ 
  <br>return (typeof id == "object") ? id : document.getElementById(id); 
  <br>}, 
  <br>init: function(fID, sID, tID, l1, l2, l3){ 
  <br>this.fL = this.$(fID); 
  <br>this.sL = this.$(sID); 
  <br>this.tL = this.$(tID); 
  <br>this.l1 = l1; 
  <br>this.l2 = l2; 
  <br>this.l3 = l3; 
  <br>this.fL.options.add(new Option("Select",-1));//         “select”   
  <br>for (var i = 0; i < l1.length; i++) { 
  <br>var item = new Option(l1[i], i); 
  <br>this.fL.options.add(item); 
  <br>} 
  <br>this.doLev2(); //  doLev2  ，       
  <br>this.doLev3(); //  doLev3  ，       
  <br>}, 
  <br>removeSTL: function(){ //      、       
  <br>this.sL.options.length = 0; 
  <br>this.tL.options.length = 0; 
  <br>}, 
  <br>removeTL: function(){ //            
  <br>this.tL.options.length = 0; 
  <br>}, 
  <br>doLev2: function(){ //       
  <br>var that = this; 
  <br>this.fL.onchange = function(){ 
  <br>that.removeSTL(); //   second select 
  <br>if (that.fL.selectedIndex == 0) { 
  <br>that.removeSTL(); // //   second select 
  <br>} 
  <br>else { 
  <br>that.sL.options.add(new Option("Select", -1)); //         “select”   
  <br>//           
  <br>var items = that.l2[that.fL.selectedIndex - 1]; 
  <br>for (var i = 0; i < items.length; i++) { //       select  
  <br>var item = new Option(items[i], i); 
  <br>that.sL.options.add(item); 
  <br>} 
  <br>} 
  <br>} 
  <br>}, 
  <br>doLev3: function(){ //       
  <br>var that = this; 
  <br>this.sL.onchange = function(){ 
  <br>that.removeTL(); //   third select 
  <br>if (that.sL.selectedIndex == 0) { 
  <br>that.removeTL(); //   third select 
  <br>} 
  <br>else { 
  <br>that.tL.options.add(new Option("Select", -1)); //         “select”   
  <br>//           
  <br>var items = that.l3[that.fL.selectedIndex - 1][that.sL.selectedIndex - 1]; 
  <br>for (var i = 0; i < items.length; i++) { //       select  
  <br>var item = new Option(items[i], i); 
  <br>that.tL.options.add(item); 
  <br>} 
  <br>} 
  <br>} 
  <br>} 
  <br>} 
  <br>onload = function(){ 
  <br>Levels.init("first", "second", "third", level1,level2,level3); //  Levels init   
  <br>} 
  <br> 
  
 
 

HTML:

デモコード:
Unititled Dcument var level 1=[Beijing],[GungZhou],[ShangHai]var level 2=[[Zhao Yang],[TianTan],[GuGong],[Tianhe],[Panyu],[Pudong],[Puxi]]var level 3=[[TianShan]、[[HugShan]]、[[TianTan 1]、[[TianTan 2]]]]、[[GugGong 1]、[[PuXu 3]]]、[[TianHe 1]]、[[Pun 1]]lvels={fL:null、/用記憶各級のselectのDOM引用sL:null,tL:null,l 1:null,l 2:null,l 3:null,$:function(id){return(typeof id=="object")?id:ftttID:futtttttttttttttttfffffffffffffffffl,ffffttttl,fffffffftttl,ffttl,fffffttttttl,fffffftl(tytytytytytytytytytytytytype.$( fID);this.sL=this.$(sID);this.tL=this.$(tID)this.l 1=l 1;this.l 2=l 2;this.l 3=l 3;this.fL.options.add(new Option(“Select”、-1);／1級メニューに「select」フラグfor(var i=0;i<l 1.length;i+adtttti、(+dedetttttttttttttttttffffffffttttttttf))))(((((("))))))))))////////////1.lettttttttttttttttttttttdoLev 2関数を呼び出して、二級メニューthis.doLev 3を処理します.3レベルのメニューを処理し、3レベルのメニューを処理し、3レベルの関数を呼び出し、3レベルのメニューを処理します.removeSTL:function(//第2、3レベルのメニュー項目this.sL.optins.length=0を削除するために使用されます.)removeTL:function()//3レベルのメニューを削除するために使用されます.function()古いsecondのselect if(that.fL.selectedeIndex==0){that.removeSTL()/////削除古いsecondのselecte e e e else{that.sL.optition. add(new Option(「Select=total=1」)/TremTremTrededel/1を追加する必要があります.dex-1];for(var i=0;i<items.length;i+){第二級の新たなselect項var item=new Option(items[i]);that.sL.options.add(item))}doliv 3:function(//処理三級のメニューは削除されます..sL.selectedIndex==0){that.removeTL();/旧thirdのselect e e e else{that.tL.options.add(new Option)/////////////////3段目に必要な配列var items=that.l 3[that.fL.selectIndex-tttttttttttttttttttttttttttttx]///////////////////////////////////////////////////////////////////////3段目に「sedededededede新規プロジェクトvar item=new Option(items[i],i);that.tL.options.add(株)｝onload=function()｛Levels.init(「first」、「second」、「third」、level 1、level 2、level 3)、／Levelsのinit方法を呼び出します.
[Ctrl+A全選注:外部Jsを導入するにはリフレッシュが必要です.]