zoukankan      html  css  js  c++  java
  • Jsp+javascript打造二级级联下拉菜单

    数据库需求分析:
    class(一级栏目信息):classId(自动编号),className(栏目名称)
    Nclass(二级栏目信息):NclassId(自动编号),NclassName(栏目名称),parentId(一级栏目id,与class表中的classId关联)

    <%@ page contentType="text/html; charset=GB2312" language="java" errorPage="../error.jsp" %>
    <%@ include file="../conn.jsp"%>
    <%@ include file="../ds.jsp"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
    <%request.setCharacterEncoding("gb2312"); %>
    <HTML><HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">

    <TITLE>级联菜单</TITLE>
    <LINK rel="stylesheet" type="text/css" href="style.css">
    </HEAD>
    <!--从数据库中得到二级栏目信息-->
    <%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="adminsave.jsp?action=add">
      <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>
            <sql:query var="query" dataSource="${bookdev}">
              SELECT * FROM class
           </sql:query>
    <c:forEach var="row" items="${query.rows}">
     <option value="${row.classId}">${row.className}</option>
    </c:forEach>
    </select>
          </TD>
          <TD>选择二级分类</TD>
          <TD>
            <SELECT name="NclassId">
              <OPTION selected value>==请选二级分类==</OPTION>
            </SELECT>
          </TD>
        </TR>
    </TABLE>
     
    </FORM>
    </BODY>
    </HTML>

  • 相关阅读:
    Python学习之路【第三篇】--集合
    Python学习之路【第二篇】-pyc简介、Python常用的数据类型及其用法和常用运算符
    Python学习之路【第一篇】-Python简介和基础入门
    NotePad++ 配置Python工作环境
    码农跳槽指南:如何在新公司建立自己的“支配地位”?
    python实现简单的聊天小程序
    真正努力的人,从来不焦虑
    我在公司待了6年,清退我却只花了6分钟
    只有潮水退去后,才知道谁在裸泳
    什么是rpc
  • 原文地址:https://www.cnblogs.com/huhu/p/122900.html
Copyright © 2011-2022 走看看