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与JavaScript实现一个功能丰富的二级级联下拉菜单，这是一个在电商、新闻门户等网站上广泛使用的功能，用于分类展示商品或文章。 ### 一、JSP与JavaScript简介 - **JSP**：是一种基于...
在使用JSP JavaScript过程中有很多的技巧与实现，那么如何构建二级级联下拉菜单呢，本文将会向你做一个源码上的介绍。
在本文中，我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中，让用户能够从相关联的分类中选择选项，例如省份与城市的选择。 首先，让我们了解这三个技术的核心...
在三级级联中，每当用户在一级或二级下拉菜单中做出选择时，会通过ajax发送异步请求到服务器，获取与当前选择对应的三级下拉菜单的选项数据。 具体实现过程如下： 1. **初始化界面**：在`KnowledgeKinds.jsp`中，...
首先，需要构建HTML结构，其中包含两个下拉菜单，一个用于显示一级菜单（部门），另一个用于显示根据选中的部门动态获取的二级菜单（子部门）。 ```html <!-- 一级部门列表 --> <option value="0">---请选择--...
本项目中，"JavaDB+JSP+AJAX实现的级联下拉菜单"是一个经典的应用场景，用于提升用户界面的用户体验，特别是在数据关联和筛选时。 **JavaDB** 是一个轻量级的关系型数据库管理系统，它基于开源的Derby数据库。Java...
在Java Web开发中，二级级联下拉菜单是一种常见的用户界面元素，用于提供层次结构的选择。这个场景中，我们利用数据库存储数据，并通过后端处理逻辑动态生成这些下拉菜单。下面将详细介绍如何使用MySQL数据库来实现...
在这个项目中，我们讨论的是使用JSP（JavaServer Pages）和JavaScript来实现一个支持三级级联的菜单，并且能够将用户的选定值保存到数据库中。这涉及到前端开发与后端处理的结合，以及数据库交互的技能。 首先，JSP...
### jsp+ajax实现三级级联 在现代Web开发中，动态加载数据并根据用户的选择进行更新是非常常见的需求。例如，在电商网站上选择省份、城市和区县时，后两个选项会根据前一个选项的选择而变化。这种效果可以通过多种...
在这个“JSP+AJAX三级级联及更多级的实现”主题中，我们将深入探讨如何通过这两种技术构建一个能够实现多级联动下拉菜单的系统，这种功能常见于地址选择、部门结构展示等场景。 首先，JSP是Java的一种服务器端脚本...
在本示例中，JSP将负责显示页面，包括创建和初始化级联下拉列表，以及处理AJAX回调后的数据更新。 实现步骤大致如下： 1. 创建JSP页面：在JSP中，你需要创建两个或者更多个下拉列表，并绑定AJAX事件监听器。当第一...
在本文中，我们将深入探讨如何在JSP（JavaServer Pages）中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景，让用户能够方便地选择他们的出生年、月和日。 首先，...
通过上述步骤，我们已经了解了如何使用JSP技术和JavaScript实现一个简单的级联菜单功能。这种方法不仅适用于简单的省份-城市选择器，还可以扩展到更复杂的多级选择器中。开发者可以根据具体需求调整和优化实现细节，...
struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
在Web应用中，级联下拉菜单常用于展现层次结构的数据，如省份-城市、部门-员工等。用户选择上级选项后，下级选项会根据所选内容动态更新。在Struts2框架中，我们可以利用Action类和JSP页面来实现这个功能。首先，...
在这个“jsp + servlet 级联菜单”项目中，我们将探讨如何利用这两者来创建交互式的级联（或下拉）菜单，这对于网页用户界面设计尤为重要，特别是对于具有多层次结构的数据展示。 1. **JSP简介** JSP是Java平台上...
本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX（异步JavaScript和XML）技术和Servlet进行交互，以实现在选择第一个下拉框的值后，第二个下拉框自动更新并显示相关数据。以下是对这个项目的详细...
这个名为“JSP+AJAX三级级联及更多级的实现.rar”的压缩包文件，显然是一个关于如何在Web应用中实现多级级联选择功能的教学资源。这种功能常见于地址选择、部门结构展示等场景，用户在一个下拉菜单的选择会影响到下...
在Web开发中，AJAX（Asynchronous JavaScript and XML）与Servlet技术常常被用来实现动态、交互式的用户界面，其中一种常见的应用就是级联下拉列表。级联下拉列表允许用户在选择一个选项后，根据所选选项动态加载并...