两个select级联操作范例（教师职称类型与职称） _Web前端

两个select级联操作实例（教师职称类型与职称）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>My JSP 'mylist_liti.jsp' starting page</title>
    <script language="javascript">

 var cateArray = new Array();

  cateArray[cateArray.length]=new Array("1","教师系列");
  cateArray[cateArray.length]=new Array("2","工程师系列");
  cateArray[cateArray.length]=new Array("3","实验系列");
  cateArray[cateArray.length]=new Array("4","研究员系列");
  
 var titleArray = new Array();

  titleArray[titleArray.length]=new Array("1","教授","教授");
  titleArray[titleArray.length]=new Array("1","副教授","副教授");
  titleArray[titleArray.length]=new Array("1","讲师","讲师");
  titleArray[titleArray.length]=new Array("1","助教","助教");
   
  titleArray[titleArray.length]=new Array("2","教授级高工","教授级高工");
  titleArray[titleArray.length]=new Array("2","高级工程师","高级工程师");
  titleArray[titleArray.length]=new Array("2","工程师","工程师");
  titleArray[titleArray.length]=new Array("2","助工","助工");
  
  titleArray[titleArray.length]=new Array("3","教授级高级实验师","教授级高级实验师");
  titleArray[titleArray.length]=new Array("3","高级实验师","高级实验师");
  titleArray[titleArray.length]=new Array("3","实验师","实验师");
  titleArray[titleArray.length]=new Array("3","助理实验师","助理实验师");
  
  titleArray[titleArray.length]=new Array("4","研究员","研究员");
  titleArray[titleArray.length]=new Array("4","副研究员","副研究员");
  titleArray[titleArray.length]=new Array("4","助理研究员","助理研究员");
  titleArray[titleArray.length]=new Array("4","实习研究员","实习研究员");

 function setTitle(obj1ID,obj2ID){
        var objCate = document.getElementById(obj1ID);
        var objTitle = document.getElementById(obj2ID);
        var i;
        var itemArray = null;
        if(objCate.value.length > 0){
             itemArray = new Array();
             for(i=0;i<titleArray.length;i++){
                if(titleArray[i][0]==objCate.value){
                    itemArray[itemArray.length]=new Array(titleArray[i][1],titleArray[i][2]);
                }
             }
        }
        for(i = objTitle.options.length ; i >= 0 ; i--){
                objTitle.options[i] = null;
        }
        objTitle.options[0] = new Option("请选择职称");
        objTitle.options[0].value = "";
        if(itemArray != null){
                for(i = 0 ; i < itemArray.length; i++){
                        objTitle.options[i+1] = new Option(itemArray[i][1]);
                        if(itemArray[i][0] != null){
                           objTitle.options[i].value = itemArray[i][0];
                        }
                }
        }

   } 
</script>
	</head>

	<body
		style="background: url(${ctx }/images/iframe_bg.gif) repeat-x; margin: 2px;">

	

		<div id="create"
			style="border: 1px solid #84a1bd; margin: 10px 250px; ">
			<form name="createForm"
				action="${ctx}/sys/tea.do?method=createTea" method="post">
				<table width="60%" align="center" cellpadding="0" cellspacing="0"
					style="font-size: 13px;">
					<tr>
						<td colspan="2" align="center">
						<br/>
							新增教师用户
						</td>
					<tr>
						<td align="center" width="28%" height="30">
							教师编号
						</td>
						<td align="left">
							  
							<input type="text" name="number" />

						</td>
					</tr>
					<tr>
						<td align="center" width="28%" height="30">
							教师姓名
						</td>
						<td align="left">
							  
							<input type="text" name="name" />

						</td>
					</tr>
					<tr>
						<td align="center" width="28%" height="30">
							职称类型
						</td>
						<td align="left">
							  
							<select name="cateid" id="cateid" onChange="setTitle('cateid','titleid')">
								 <option value="">请选职称类型</option>
								<option value="1" >
									教师系列
								</option>
								<option value="2">
									工程师系列
								</option>
								<option value="3">
									实验系列
								</option>
								<option value="4">
									研究员系列
								</option>
							</select>

						</td>
					</tr>
					<tr>
						<td align="center" width="28%" height="30">
							职     称
						</td>
						<td align="left">
							  
							<select name="title" id="titleid">
								<option value="暂无">
									请选职称
								</option>
							</select>

						</td>
					</tr>
					
					<tr>
						<td align="center" width="28%" height="30">
							 
						</td>
						<td align="left">
							  

							<a href="javascript:document.createForm.submit();">新增</a>
							  
							
						</td>
					</tr>
				</table>
			</form>
		</div>

		<br />
	</body>
</html>