class(一级栏目信息）：classId(自动编号），className（栏目名称）, Nclass（二级栏目信息）, NclassId（自动编号），NclassName(栏目名称），parentId（一级栏目id，与class表中的classId关联）
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 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 实现二级级联下拉菜单的知识点解析 #### 一、概述 在Web开发领域，实现动态的交互式用户界面是提升用户体验的重要手段之一。本文档将详细解析如何通过JSP（JavaServer Pages）与JavaScript来...
在使用JSP JavaScript过程中有很多的技巧与实现，那么如何构建二级级联下拉菜单呢，本文将会向你做一个源码上的介绍。
在本文中，我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中，让用户能够从相关联的分类中选择选项，例如省份与城市的选择。 首先，让我们了解这三个技术的核心...
在三级级联中，每当用户在一级或二级下拉菜单中做出选择时，会通过ajax发送异步请求到服务器，获取与当前选择对应的三级下拉菜单的选项数据。 具体实现过程如下： 1. **初始化界面**：在`KnowledgeKinds.jsp`中，...
首先，需要构建HTML结构，其中包含两个下拉菜单，一个用于显示一级菜单（部门），另一个用于显示根据选中的部门动态获取的二级菜单（子部门）。 ```html <!-- 一级部门列表 --> <option value="0">---请选择--...
在Java Web开发中，二级级联下拉菜单是一种常见的用户界面元素，用于提供层次结构的选择。这个场景中，我们利用数据库存储数据，并通过后端处理逻辑动态生成这些下拉菜单。下面将详细介绍如何使用MySQL数据库来实现...
本项目中，"JavaDB+JSP+AJAX实现的级联下拉菜单"是一个经典的应用场景，用于提升用户界面的用户体验，特别是在数据关联和筛选时。 **JavaDB** 是一个轻量级的关系型数据库管理系统，它基于开源的Derby数据库。Java...
在这个项目中，我们讨论的是使用JSP（JavaServer Pages）和JavaScript来实现一个支持三级级联的菜单，并且能够将用户的选定值保存到数据库中。这涉及到前端开发与后端处理的结合，以及数据库交互的技能。 首先，JSP...
本文将详细介绍如何使用JSP和AJAX实现三级级联功能。 #### JSP基础介绍 JSP是一种基于Java的技术，用来生成动态网页内容。它允许开发者在HTML代码中嵌入Java代码片段和表达式，这些Java代码会被服务器编译为Servlet...
在Web开发中，级联下拉列表是一种常见的交互方式，它允许用户在选择一个选项后，根据选择自动更新另一个下拉列表。在这个“ajax+struts2.0+jsp下拉列表级联”的示例中，我们将探讨如何利用这三个技术实现这种功能。 ...
在这个“JSP+AJAX三级级联及更多级的实现”主题中，我们将深入探讨如何通过这两种技术构建一个能够实现多级联动下拉菜单的系统，这种功能常见于地址选择、部门结构展示等场景。 首先，JSP是Java的一种服务器端脚本...
在本文中，我们将深入探讨如何在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三级级联”实现中，开发者可能会使用AJAX来异步获取服务器上的数据，这些数据可能代表了级联选择的各个层级。例如，当用户在第一个下拉菜单选择一个国家后，AJAX会发送一个请求到服务器，服务器根据...
在Web开发中，AJAX（Asynchronous JavaScript and XML）与Servlet技术常常被用来实现动态、交互式的用户界面，其中一种常见的应用就是级联下拉列表。级联下拉列表允许用户在选择一个选项后，根据所选选项动态加载并...