• 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>

  • 相关阅读:
    Docker配置samba共享
    阿里云SSL 免费证书申请方法
    linux centos7 关闭防火墙的方法
    PHP 面向对象的特性 抽象类和接口
    详解mixphp的依赖注入控制反转
    swoole mixphp swoolefor热更新使用方法
    nginx ab并发测试 apr_socket_recv: Connection refused (111
    PHP golang java 并发测试
    php.ini 添加的模块没更新的解决方法
    关于golang的未来的道路
  • 原文地址:https://www.cnblogs.com/huhu/p/122900.html
Copyright © 2020-2023  润新知