级联菜单.jsp

jsp+javascript打造级联下拉菜单 包含数据库。

<%@page contentType="text/html; charset=gb2312"%>
<%@page import="java.sql.*"%>
<%request.setCharacterEncoding("gb2312");%>
<!--从数据库中得到二级栏目信息-->
<!--下面是连接数据库，请根据实际情况修改-->
<jsp:useBean id="db" scope="page" class="util.DBConnection"/>
<%
  Connection conn = db.getConn();
  Statement stmt = conn.createStatement();
  String sql = "select * from Nclass order by NclassId asc";
  ResultSet rs = stmt.executeQuery(sql);
%>
<!--将二级栏目信息保存到数组subcat中-->
<script type="text/javascript">
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array("<%=rs.getString("NclassName")%>","<%=rs.getString("NclassId")%>","<%=rs.getString("parentId")%>");
<%
count++;
}
rs.close();
%>
onecount=<%=count%>;
<!--决定select显示的函数-->
function changelocation(locationid)
{
document.myform.NclassId.length = 0;

var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
document.myform.NclassId.options[document.myform.NclassId.length] = new Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<FORM method="POST" name="myform" action="" >
<TABLE>
  <TR>
    <TD>一级分类</TD>
    <TD>
      <SELECT name="classId" onChange="changelocation(document.myform.classId.options[document.myform.classId.selectedIndex].value)" size="1">
        <OPTION selected value="">==请选一级分类==</OPTION>
      <%
        String sql1 = "SELECT * FROM class";
        Statement stmt1 = conn.createStatement();
        ResultSet rs1 = stmt1.executeQuery(sql1);
        while (rs1.next()) {
      %>
          <option value="<%= rs1.getString("classid")%>"><%= rs1.getString("classname") %></option>
      <% } %>
      </SELECT>
    </TD>
    <TD>选择二级分类</TD>
    <TD>
      <SELECT name="NclassId">
        <OPTION selected value="">==请选二级分类==</OPTION>
      </SELECT>
    </TD>
  </TR>
</TABLE>
</FORM>