`
ThinkInJava
  • 浏览: 20743 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
javafu
社区版块
存档分类
最新评论

JSP+JavaScript打造二级级联下拉菜单

    博客分类：
  • Java
 
阅读更多
    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 divfix=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=$>
          SELECT * FROM class
       </sql:query>
<c:forEach var=row items=$>
<option value=$>$</option>
</c:forEach>
</select>
      </TD>
      <TD>选择二级分类</TD>
      <TD>
        <SELECT name=NclassId>
          <OPTION selected value>==请选二级分类==</OPTION>
        </SELECT>
      </TD>
    </TR>
</TABLE>
 
</FORM>
</BODY>
</HTML>
<%@ 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 divfix=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=$>
          SELECT * FROM class
       </sql:query>
<c:forEach var=row items=$>
<option value=$>$</option>
</c:forEach>
</select>
      </TD>
      <TD>选择二级分类</TD>
      <TD>
        <SELECT name=NclassId>
          <OPTION selected value>==请选二级分类==</OPTION>
        </SELECT>
      </TD>
    </TR>
</TABLE>
 
</FORM>
</BODY>
</HTML>
分享到：
| JSP动态网站环境搭建详细步骤
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用JSP+JavaScript打造二级级联下拉菜单

    用JSP+JavaScript打造二级级联下拉菜单

    JSP+JavaScript二级级联下拉菜单

    在使用JSP JavaScript过程中有很多的技巧与实现，那么如何构建二级级联下拉菜单呢，本文将会向你做一个源码上的介绍。

    jsp出生日期三级级联下拉列表

    jsp出生日期三级级联下拉列表，今晚做的，呵呵！分享下！

    Ajax实现的三级联动下拉菜单

    struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp

    构建支持 Ajax 的自动完成和级联式下拉控件介绍及代码

    这些基于 JSP TagLib 的可配置控件利用 JavaScript Serialized Object Notation (JSON)、JavaScript 和 CSS。它们是标准的 JSP Taglib 控件，本文将展示可多么轻松地将其拖放到任意应用程序之中，从而提供更加直观、...

    dwr验证框架多级联下拉菜单

    index.jsp(级联的重点) ; charset=gb2312" language="java" import="java.sql.*" errorPage=""%&gt; &lt;jsp:useBean id="connDB" class="com.core.ConnDB" scope="page"/&gt; ResultSet rs_city = null; ResultSet rs_...

    JavaScript网页特效范例宝典源码

    实例047 二级导航菜单 74 实例048 半透明背景的下拉菜单 76 实例049 展开式导航条 80 实例050 用层制作下拉菜单1 81 实例051 用层制作下拉菜单2 84 1.10 侧导航条设计 86 实例052 自动隐藏式菜单 87 实例053 收缩式...

    javascript网页特效实例大全（13-19）

    实例374　无刷新的级联下拉列表　614 实例375　使用XML实现不刷新页面查询数据　616 16.3　调用与控制　619 实例376　将查询结果导出到Word　619 实例377　调用Excel　621 实例378　调用PowerPoint　622 16.4　其他...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    MenuSample 级联菜单实例 PageSample 实现Ajax翻页效果 数据库备份 本章实例所需要的数据库 第15章（/C15/） AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务 RicoColor 使用...

    Java学习笔记-个人整理的

    \contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...

Magicbox
Global site tag (gtag.js) - Google Analytics