javascript 三級聯動小例子

<script language="javascript">
	var selItm = new Array(4), selItemr = new Array(4),i,j;
	for ( i=0; i<4; i++){
		selItm[i] = new Array();
		selItemr[i] = new Array();
		
	}

selItm[0][0] = new Option("請選擇", " ");					//定義基本選項
selItm[1][0] = new Option("小學數學", "小學數學");
selItm[1][1] = new Option("小學語文", "小學語文");
selItm[1][2] = new Option("小學英語", "小學英語");
selItm[2][0] = new Option("中學數學", "中學數學");
selItm[2][1] = new Option("中學物理", "中學物理");
selItm[2][2] = new Option("中學語文", "中學語文");
selItm[2][3] = new Option("中學英語", "中學英語");
selItm[2][4] = new Option("中學政治", "中學政治");
selItm[3][0] = new Option("大學數學", "大學數學");
selItm[3][1] = new Option("大學物理", "大學物理");
selItm[3][2] = new Option("大學語文", "大學語文");
selItm[3][3] = new Option("大學英語", "大學英語");
selItm[3][4] = new Option("大學政治", "大學政治");

for( i=0;i<selItm.length;i++){
	for( j=0;j<selItm[i].length;j++){
		selItemr[i][j] = new Array();
	}
}
//
selItemr[0][0][0]= new Option("請選擇", " ");	
selItemr[1][0][0] = new Option("趙一", "趙一");
selItemr[1][0][1] = new Option("趙2", "趙2");
selItemr[1][1][0] = new Option("趙二", "趙二");
selItemr[1][2][0] = new Option("趙三", "趙三");
selItemr[2][0][0] = new Option("王一", "王一");
selItemr[2][1][0] = new Option("王二", "王二");
selItemr[2][2][0] = new Option("王三", "王三");
selItemr[2][3][0] = new Option("王四", "王四");
selItemr[2][4][0] = new Option("王五", "王五");
selItemr[3][0][0] = new Option("李一", "李一");
selItemr[3][1][0] = new Option("李二", "李二");
selItemr[3][2][0] = new Option("李三", "李三");
selItemr[3][3][0] = new Option("李四", "李四");
selItemr[3][4][0] = new Option("李五", "李五");


function OnS1Change(x){
	var temp2 = document.form1.sel12; 
	var temp3 =  document.form1.sel13;
	
	temp2.options.length = 0;
	temp3.options.length = 0;
	for (i=0;i<selItm[x].length;i++){
	   	 temp2.options[i]=new Option(selItm[x][i].text,selItm[x][i].value);	// 實例化對象
	 
	   		
	}

	for(i=0;i<selItemr[x][0].length;i++){
		 temp3.options[i] = new Option(selItemr[x][0][i].text,selItemr[x][0][i].value); 
	}
	

	temp2.options[0].selected=true;							//顯示菜單1的初始值
	temp3.options[0].selected = true;
	


}
function OnS2Change(){
	var temp1= document.form1.sel1,temp2 =  document.form1.sel12,temp3 =document.form1.sel13 ;
	var x = temp1.selectedIndex,y=temp2.selectedIndex;
	
	
	temp3.options.length = 0;
	for(i=0;i<selItemr[x][y].length;i++){
		
		
		 temp3.options[i] = new Option(selItemr[x][y][i].text,selItemr[x][y][i].value); 
	}

	temp3.options[0].selected =true;

	
}
function OnS3Change(str1,str2,str3){
	
	if(str1>0){
		switch(str1){								// 判斷身分
			case 1:str1="小學生";break;
			case 2:str1="中學生";break;
			case 3:str1="大學生";break;
		}
		alert("您的身分是："+str1+"\n您最喜歡的科目是："+str2+ "\n您最喜歡的老師是："+str3);			// 輸出 信息
	}
	else
		alert("您沒有選擇身分");
}
</script>

<form name="form1" method="post" action="">
	<label>您的身分是：<select name="sel1" onChange="OnS1Change(this.value)">
		<option value="0">請選擇</option>
		<option value="1">小學生</option>
		<option value="2">中學生</option>
		<option value="3">大學生</option>
	</select>
	
	</label>
	<label><!--  建立的菜單2-->
	您最喜歡的科目：
	<select name="sel12"  onChange="OnS2Change()"></select>
	</label>
	<label><!--  建立的菜單2-->
	您最喜歡的老師：
	<select name="sel13"  ></select>
	</label>
	<label><!--  收集所選擇的信息-->
	<input type="button" name="Submit" value="肯定" onClick="OnS3Change(sel1.value,sel12.value,sel13.value)">
	</label>
</form>