J +JavaScript打造二级级联下拉菜单：
cla (一级栏目信息）：cla Id(自动编号），cla ame（栏目名称）, Ncla （二级栏目信息）, Ncla Id（自动编号），Ncla ame(栏目名称），parentId（一级栏目id，与cla 表中的cla Id关联）
<%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.j %>
<%@ include file=../co .j %>
<%@ include file=../ds.j %>
<%@ taglib uri=http://java.sun.com/j /jstl/sql divfix=sql %>
<%request.setCharacterEncoding(gb2312); %>
<HTML> lt;HEAD>
<META http-equiv=Content-Type content=text/html; charset=gb2312>
<TITLE>级联菜单</TITLE>
<LINK rel=stylesheet type=text/c href=style.c gt;
</HEAD>
<!--从数据库中得到二级栏目信息-->
<%String sql=select * from Ncla order by Ncla Id asc;
ResultSet rs=stmt.executeQuery(sql);
%>
<!--将二级栏目信息保存到数组subcat中-->
< cript type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array(<%=rs.getString(Ncla ame)%>,
<%=rs.getString(Ncla Id)%>,<%=rs.getString(parentId)%>);
<%
count++;
}
rs.close();
%>
onecount=<%=count%>
<!--决定select显示的函数-->
function changelocation(locationid)
{
document.myform.Ncla Id.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
document.myform.Ncla Id.optio [document.myform.Ncla Id.length] = new
Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<FORM method=POST name=myform action=admi ave.j ?action=add>
<TABLE>
<TR>
<TD>一级分类</TD>
<TD>
< ELECT name=cla Id onChange=changelocation(document.myform.cla Id.optio
[document.myform.cla Id.selectedIndex].value) size=1>
<OPTION selected value>==请选一级分类==</OPTIO gt;
< ql:query var=query dataSource=$>
SELECT * FROM cla
</sql:query>
<c:forEach var=row items=$>
lt;option value=$>$</optio gt;
</c:forEach>
</select>
</TD>
<TD>选择二级分类</TD>
<TD>
< ELECT name=Ncla Id>
<OPTION selected value>==请选二级分类==</OPTIO gt;
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
<%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.j %>
<%@ include file=../co .j %>
<%@ include file=../ds.j %>
<%@ taglib uri=http://java.sun.com/j /jstl/sql divfix=sql %>
<%request.setCharacterEncoding(gb2312); %>
<HTML> lt;HEAD>
<META http-equiv=Content-Type content=text/html; charset=gb2312>
<TITLE>级联菜单</TITLE>
<LINK rel=stylesheet type=text/c href=style.c gt;
</HEAD>
<!--从数据库中得到二级栏目信息-->
<%String sql=select * from Ncla order by Ncla Id asc;
ResultSet rs=stmt.executeQuery(sql);
%>
<!--将二级栏目信息保存到数组subcat中-->
< cript type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array(<%=rs.getString(Ncla ame)%>,
<%=rs.getString(Ncla Id)%>,<%=rs.getString(parentId)%>);
<%
count++;
}
rs.close();
%>
onecount=<%=count%>
<!--决定select显示的函数-->
function changelocation(locationid)
{
document.myform.Ncla Id.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
document.myform.Ncla Id.optio [document.myform.Ncla Id.length] = new
Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<FORM method=POST name=myform action=admi ave.j ?action=add>
<TABLE>
<TR>
<TD>一级分类</TD>
<TD>
< ELECT name=cla Id onChange=changelocation(document.myform.cla Id.optio
[document.myform.cla Id.selectedIndex].value) size=1>
<OPTION selected value>==请选一级分类==</OPTIO gt;
< ql:query var=query dataSource=$>
SELECT * FROM cla
</sql:query>
<c:forEach var=row items=$>
lt;option value=$>$</optio gt;
</c:forEach>
</select>
</TD>
<TD>选择二级分类</TD>
<TD>
< ELECT name=Ncla Id>
<OPTION selected value>==请选二级分类==</OPTIO gt;
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
[b]
分享到：
- 2007-11-30 05:29
- 浏览 1463
- 评论(0)
- 论坛回复 / 浏览 (0 / 5183)
- 查看更多
相关推荐
在网页设计中，级联菜单（Cascading Menu）是一种常见的交互元素，它允许用户通过层级结构来选择或浏览选项。...通过学习和分析这些代码，我们可以加深对AJAX级联菜单实现的理解，并将其应用到自己的项目中。
在本文中，我们将深入探讨如何使用...总结，实现Ajax级联菜单的关键在于数据库设计、服务器端数据处理以及前端的Ajax请求与动态更新。通过这种方式，我们可以构建一个灵活、响应的Web应用，提供流畅的多级选择体验。
要使用jQuery实现级联菜单，我们需要遵循以下步骤： 1. **HTML结构**：创建基本的HTML元素，包括多个`<select>`标签，每个`<select>`代表一级菜单。子级菜单的`<option>`应当有特殊的标识，如数据属性（data-*），...
JavaScript是实现异步级联菜单的主要编程语言，负责处理用户交互、DOM（文档对象模型）操作以及AJAX请求的发送和响应处理。在"AjaxMultiMenu.html"页面中，JavaScript代码会监听用户的点击事件，当用户选择一个菜单...
在IT行业中，级联菜单（Cascading Menu）是一种常见的用户界面元素，它允许用户通过多级选择来筛选或导航到特定的信息。在本案例中，我们关注的是如何使用Java和Ajax技术来实现一个二级联动的菜单。Ajax，即...
<title>Ajax级联菜单实现 <!-- var cache = []; function getLevel2() { if (document.forms.LevelMenu.select1.selectedIndex == 0) { // 当一级菜单未被选中时，二级菜单保持初始状态 document.forms....
在本文中，我们将深入探讨如何使用jQuery库进行AJAX（异步JavaScript和XML）开发，通过实际案例来学习包括级联菜单、谷歌式搜索提示和可编辑表格在内的常见功能。这些功能都允许用户在不刷新整个页面的情况下与网页...
### jQuery+ajax实现无刷新级联菜单示例知识点 #### 知识点一：无刷新级联菜单概念 无刷新级联菜单是一种常见的Web界面组件，主要用于地区选择、分类筛选等场景。它允许用户在一个下拉列表中选择一个选项后，另一个...
综上所述，这个Ajax级联菜单示例涵盖了前端与后端的交互，DOM操作，数据传输以及用户交互等多个方面的知识点，是学习和理解Ajax技术的一个实用案例。通过分析`MyJsp.jsp`和`MyJsp1.jsp`的具体实现，我们可以深入理解...
在这个主题中，我们将深入探讨JavaScript实现级联菜单的基本原理、常见方法以及如何利用AJAX进行动态加载。 首先，理解级联菜单的工作原理是至关重要的。级联菜单通常由HTML结构组成，其中包含嵌套的`<ul>`和`<li>`...
在本文中，我们将探讨如何利用jQuery库中的show和hide方法来实现级联菜单的功能。 首先，需要了解jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过封装DOM操作、事件处理、动画和Ajax交互等，简化了Web开发...
本示例中的".net MVC架构下无刷新三级级联菜单源码"是一个典型的前端与后端交互场景，它展示了如何利用ASP.NET MVC框架以及DropdownList控件来实现一个动态的、无需页面刷新的三级级联菜单。这个菜单的数据是从...
本话题将深入探讨AJAX如何实现用户名验证以及级联菜单的构建，这两项功能在现代网页应用中都非常常见。 ### AJAX验证用户名 **基本概念：** AJAX验证用户名通常用于注册或登录表单，以实时检查用户输入的用户名...
在Struts2中实现级联菜单是一项常见的需求，通常用于构建复杂的下拉选择框，使得用户能够逐级选择相关选项。级联菜单在数据表关联或者层级结构的展示中非常实用，例如地区选择、部门分类等。 首先，我们需要理解...
在网页开发中，级联菜单（Cascading ...总的来说，js+jsp标签实现页面级联菜单是一种常用且高效的方法，尤其适用于大型、结构复杂的网站。通过对数据的处理和DOM操作，我们可以创建出符合用户需求的交互式菜单系统。
在实现级联菜单时，jQuery提供了便利的方法来选择元素、添加事件监听器以及动态更新页面内容。例如，可以使用`$(selector).click(function(){...})`来响应点击事件，`$(selector).append(content)`来向元素追加内容...
本篇文章将深入探讨如何利用DWR来实现一个两级级联菜单，并以SQL Server 2000数据库作为数据源。 首先，我们需要理解DWR的基本工作原理。DWR允许在后台执行Java方法并返回结果到前端，无需刷新整个页面。这种技术...