關連命令選單二階層的意思是, 主選單將控制子選單, 子選單再控制次選單, 如此就可達成階層般的應用,
同樣是運用陣列預先宣告好對映選單, 唯一不同的是次選單應用到三維陣列.
select 的宣告:
<FORM NAME="F">
主選單<BR>
<SELECT NAME="M" onChange="ChangCat1(this.options.selectedIndex);">
<OPTION> 受控子選單
<OPTION> 小恐龍網站群
</SELECT>
子選單<BR>
<SELECT NAME="C1" onChange="ChangCat2(this.options.selectedIndex);">
<OPTION VALUE="#"> 受控子選單選項 1
<OPTION VALUE="#"> 受控子選單選項 2
</SELECT>
次選單<BR>
<SELECT NAME="C2">
<OPTION VALUE="#"> 受控次選單選項 1
<OPTION VALUE="#"> 受控次選單選項 2
</SELECT>
</FORM>
JavaScript 內容:
var c1 = new Array(2);
var c2 = new Array(3);
var temp1, temp2, l1;
for (i=0; i<2; i++) {
c1[i] = new Array();
c2[i] = new Array();
for (j=0; j<2; j++) c2[i][j] = new Array();
}
function init(){
temp1 = document.F.C1;
temp2 = document.F.C2;
// 主選單
// [0] 受控子選單
// [1] 小恐龍網站群
//
// 子選單對映關係
c1[0][0]=new Option("受控次選單選項 1","#");
c1[0][1]=new Option("受控次選單選項 2","#");
c1[1][0]=new Option("小恐龍工作坊","#");
c1[1][1]=new Option("小恐龍的世界","#");
// 次選單對映關係
c2[0][0][0]=new Option("受控選單 1 - 1","#");
c2[0][0][1]=new Option("受控選單 1 - 2","#");
c2[0][1][0]=new Option("受控選單 2 - 1","#");
c2[0][1][1]=new Option("受控選單 2 - 2","#");
c2[1][0][0]=new Option("程式設計","#");
c2[1][0][1]=new Option("網頁設計","#");
c2[1][1][0]=new Option("瓶中信","#");
c2[1][1][1]=new Option("討論天地","#");
ChangCat1(0);
}
function ChangCat1(x){
l1 = x;
for (i=temp1.options.length-1; i>0; i--) temp1.options[i] = null;
for (i=0; i<c1[x].length; i++) temp1.options[i] = new Option(c1[x][i].text,c1[x][i].value);
temp1.options[0].selected = true;
}
function ChangCat2(x){
for (i=temp2.options.length-1; i>0; i--) temp2.options[i] = null;
for (i=0; i<c2[l1][x].length; i++) {
temp2.options[i] = new Option(c2[l1][x][i].text,c2[l1][x][i].value);
}
temp2.options[0].selected = true;
}