两个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><bodystyle="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>