两个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>
补充：web前端 , HTML/CSS ,
