javascript 三级下拉选择菜单Levels对象_导航菜单-js教程-PHP中文網

javascript 三级下拉选择菜单Levels对象_导航菜单

WBOY

發布： 2016-05-16 18:49:35

原創

998 人瀏覽過

JavaScript：

复制代码代码如下:

HTML：

复制代码代码如下:

演示代码：

var Levels = { 
fL: null,//ç¨åå¨åçº§selectçDOMå¼ç¨ 
sL: null, 
tL: null, 
l1: null, 
l2: null, 
l3: null, 
$: function(id){ 
return (typeof id == "object") ? id : document.getElementById(id); 
}, 
init: function(fID, sID, tID, l1, l2, l3){ 
this.fL = this.$(fID); 
this.sL = this.$(sID); 
this.tL = this.$(tID); 
this.l1 = l1; 
this.l2 = l2; 
this.l3 = l3; 
                     
this.fL.options.add(new Option("Select",-1));//ç»ä¸çº§èåæ·»å ä¸ä¸ª"select"æ å¿

for (var i = 0; i < l1.length; i++) { 
var item = new Option(l1[i], i); 
this.fL.options.add(item); 
}

this.doLev2(); //è°ç¨doLev2å½æ°ï¼å¤çäºçº§èå 
this.doLev3(); //è°ç¨doLev3å½æ°ï¼å¤çä¸çº§èå 
}, 
removeSTL: function(){ //ç¨äºå é¤ç¬¬äºãä¸çº§çèåé¡¹ 
this.sL.options.length = 0; 
this.tL.options.length = 0; 
}, 
removeTL: function(){ //ç¨äºå é¤ç¬¬ä¸çº§çèåé¡¹ 
this.tL.options.length = 0; 
}, 
doLev2: function(){ //å¤çäºçº§èå 
var that = this; 
this.fL.onchange = function(){ 
that.removeSTL(); //å é¤æ§secondçselect 
if (that.fL.selectedIndex == 0) { 
that.removeSTL(); // //å é¤æ§secondçselect 
} 
else { 
that.sL.options.add(new Option("Select", -1)); //ç»äºçº§èåæ·»å ä¸ä¸ª"select"æ å¿ 
//è·åç¬¬äºçº§æéçæ°ç» 
var items = that.l2[that.fL.selectedIndex - 1];

for (var i = 0; i < items.length; i++) { //æ·»å ç¬¬äºçº§çæ°selecté¡¹ 
var item = new Option(items[i], i); 
that.sL.options.add(item); 
} 
} 
} 
}, 
doLev3: function(){ //å¤çä¸çº§èå 
var that = this; 
this.sL.onchange = function(){

that.removeTL(); //å é¤æ§thirdçselect 
if (that.sL.selectedIndex == 0) { 
that.removeTL(); //å é¤æ§thirdçselect 
} 
else { 
that.tL.options.add(new Option("Select", -1)); //ç»ä¸çº§èåæ·»å ä¸ä¸ª"select"æ å¿ 
//è·åç¬¬ä¸çº§æéçæ°ç» 
var items = that.l3[that.fL.selectedIndex - 1][that.sL.selectedIndex - 1];

for (var i = 0; i < items.length; i++) { //æ·»å ç¬¬ä¸çº§çæ°selecté¡¹ 
var item = new Option(items[i], i); 
that.tL.options.add(item); 
} 
} 
} 
} 
}

onload = function(){ 
Levels.init("first", "second", "third", level1,level2,level3); //è°ç¨Levelsçinitæ¹æ³ 
} 
</script> 
 
 
<form> 
<select id="first"> 
</select> 
<select id="second"> 
</select> 
<select id="third"> 
</select> 
</form>

[Ctrl+A å¨é æ³¨:å¦éå¼å¥å¤é¨Jséå·æ°æè½æ§è¡]