怎么做二级下拉菜单?
本人想做个二级的下拉菜单,既后面的下拉菜单根据前面的内容变化而变化,请问怎么实现哦???
<%@ page contentType="text/html;charset=gb2312"%>
<%@ include file="tocn.jsp"%>
<%@ page language="java" import="java.sql.*,com.ExamTable.*"%>
<jsp:useBean id="conn" scope="page" class="com.ExamTable.ConnectionManager"/>
<html>
<head><title>级联菜单</title></head>
<body onload="initSel()">
<SCRIPT LANGUAGE="JavaScript">
<%
Connection con=null;
con=conn.Conn();
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from specialtyinfo where specialtyid<>0");
int i=0;
%>
var arrData=new Array();
<%
while(rs.next()){
%>
arrData[<%=i%>]=new Array("<%=rs.getString("specialty")%>","<%=rs.getString("specialtyCode")%>");
<%
i++;
}
rs.close();
stmt.close();
con.close();
%>
function initSel() {
var optStr="";
for(var i=0;i<arrData.length;i++){
if(optStr.search("("+arrData[i][0]+")")<0){
optStr+="("+arrData[i][0]+")";
var oOptA=document.createElement("OPTION");
oOptA.value=arrData[i][0];
oOptA.innerHTML=arrData[i][0];
form1.selMain.appendChild(oOptA);
}
}
chgSlave();
}
function chgSlave()
{
form1.selSlave.options.length=0;
for(var i=0;i<arrData.length;i++)
{
if(arrData[i][0]==form1.selMain.value)
{
var oOptB=document.createElement("OPTION");
oOptB.value=arrData[i][1];
oOptB.innerHTML=arrData[i][1];
form1.selSlave.appendChild(oOptB);
}
}
}
</SCRIPT>
<form name="form1" method="post" action="4.jsp">
<table>
<tr>
<td>报考专业:<select id="selMain" onchange="chgSlave()" name="selMain"></select>
专业代码:<select id="selSlave" name="selSlave"></select>
</td>
</tr>
</table>
</form>
</body>
</html>