一:一个页面中两组一样的联动菜单,迭代出一样的内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</HEAD>
<BODY>
<!-- select中的id属性是将被用到的,onchange是用于处理联动的函数-->
<!--在这里id为aaa和id为bbb为一组联动信息,id为ccc和id为ddd为一组联动信息 -->
<SELECT NAME="aaa" id="aaa" style="width:7em" onchange="MulSelectSPLD(1,'')">
<OPTION VALUE="" SELECTED>
</SELECT>
<SELECT NAME="bbb" id="bbb" style="width:7em">
<OPTION VALUE="" SELECTED>
</SELECT>
<SELECT NAME="ccc" id="aaa1" style="width:7em" onchange="MulSelectSPLD(1,'1')">
<OPTION VALUE="" SELECTED>
</SELECT>
<SELECT NAME="ddd" id="bbb1" style="width:7em">
<OPTION VALUE="" SELECTED>
</SELECT>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var selectAllIds=["aaa","bbb"];//对应select的id属性,有几个要做联动的select就写几个
arrViewValue=[]; arrDBValue=[]; //arrViewValue 用于select被显示出的值,arrDBValue 用于select中被添加到数据库的值
/* 此处的内容应该用数据库取出,用程序迭代填写到相应位置,下面的arrViewValue,arrDBValue是在向联动菜单的下拉框中灌输内容呢*/
arrViewValue[arrViewValue.length]=["aaa","aaa11-1"];//位置: 这些值分别对应A位置的每一个select中要显示的文字
arrDBValue[arrDBValue.length]=["aa1","111aaa"]; // 这些值分别对应B位置的每一个select中的value属性
arrViewValue[arrViewValue.length]=["aaa","aaa11-2"];
arrDBValue[arrDBValue.length]=["aa1","2-11aaa"];
arrViewValue[arrViewValue.length]=["bbb","bbb11-1"];
arrDBValue[arrDBValue.length]=["bb1","111bbb"];
arrViewValue[arrViewValue.length]=["bbb","bbb11-2"];
arrDBValue[arrDBValue.length]=["bb1","2-11bbb"];
arrViewValue[arrViewValue.length]=["bbb","bbb11-3"];
arrDBValue[arrDBValue.length]=["bb1","3-11bbb"];
arrViewValue[arrViewValue.length]=["aaa1","ccc111"];
arrDBValue[arrDBValue.length]=["aaa1-1","111ccc"];
arrViewValue[arrViewValue.length]=["bbb1","ddd111"];
arrDBValue[arrDBValue.length]=["bbb-1","111ddd"];
</script>
<script>
// 下拉框选择变化时触发的函数,用于重新生成其下级下拉框
// num : 下拉框的级数, 1 表示最顶级
function MulSelectSPLD(num,objId)
{
var i,j,arrTemp=[];
// 取得表单当前触发的下拉框的父级下拉框的值, 存放于 arrTemp 数组中(即不需要改变的值)
for(i=0;i<num;i++)
{
arrTemp[i]=document.getElementById(selectAllIds[i]+objId).value
}
if(num<selectAllIds.length)
{
// 对于触发下拉框的下一级的下拉框
with(document.getElementById(selectAllIds[num]+objId))
{
// 先清空内容
length=0;
// 对所有的记录遍历
for(i=0;i<arrViewValue.length;i++)
{
var find=false
// 如果父级下拉框的记录不是当前选中的值,则跳过
for(j=0;j<num;j++)
{
if(arrTemp[j]!=arrDBValue[i][j])
{
break;
}
}
if(j!=num)
{
continue;
}
// 这里已经可以保证第 i 项记录的数据属于当前选项的子数据
// 检查循环过程中是否已经添加了该选项,如果已有了, 则 fine = true
for(m=0;m<options.length;m++)
{
if(options[m].value==arrDBValue[i][num])
{
find=true
}
}
if(length==0||!find) // 若当前没有选项或者尚未添加该选项项,则添加之
{
options[options.length]=new Option(arrViewValue[i][num],arrDBValue[i][num])
}
}
// 递归调用生成下一级菜单的内容
//MulSelect((num+1),'')
}
}
}
/*此jsp刚刚初始化时会调用这两个函数*/
/*第一组联动的初始函数*/
MulSelectSPLD(0,'')
/*第二组联动的初始值,第二个参数跟aaa1里面的1是有关系的*/
MulSelectSPLD(0,'1')
</SCRIPT>
</HTML>
分享到:
相关推荐
【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景,它主要利用JavaServer Pages(JSP)和Asynchronous JavaScript and XML(AJAX)来实现动态网页中的数据交互和页面更新。在这个例子中,我们看到的是一个...
本文将详细解析如何使用纯JSP(JavaServer Pages)技术实现一个3级联动菜单,并探讨相关知识点。 首先,我们要理解什么是3级联动菜单。在网页中,联动菜单通常指的是当用户在一个下拉菜单中选择一个选项时,另一个...
联动菜单允许用户在一个下拉框的选择影响另一个下拉框的显示内容,提供动态交互的用户体验。 首先,我们看到的代码片段是在HTML中嵌入JavaScript来实现联动效果的。`<script>`标签内包含了`ChangeSelect()`函数,这...
在这个“二级联动菜单(jsp mysql)”的实例中,我们将探讨如何使用JavaServer Pages (JSP) 和 MySQL数据库来实现这种功能。 首先,JSP是Java的一种动态网页技术,它允许开发人员在HTML页面中嵌入Java代码,从而...
### jsp+mssql四级联动菜单实现解析 #### 一、项目背景与技术栈 本案例主要涉及的技术包括:JSP(Java Server Pages)、SQL Server(Microsoft SQL Server)以及客户端脚本语言JavaScript。该项目实现了四级联动...
【Ajax多级联动菜单】是一种常见的前端交互设计,它允许用户在选择某个菜单项时,自动更新下一级菜单的内容,以此类推,实现多级菜单之间的动态关联。这种技术广泛应用于网页表单填写、筛选器等场景,为用户提供更加...
### JSP从数据库获取数据填充下拉框实现二级联动菜单的方法 #### 一、引言 在Web开发中,为了提高用户体验和数据处理效率,经常需要实现动态数据填充功能,尤其是对于多级联动的选择菜单。本文将详细介绍如何利用...
总的来说,`ajax四级联动菜单` 的实现结合了前端的Ajax技术、JSON解析、DOM操作,以及后端的JSP和数据库操作,展示了Web开发中前后端协作的重要性和动态交互的实现方式。这样的功能在很多需要地理信息输入的场景中都...
在IT行业中,"js+jsp三级联动 源码"是一个常见的前端与后端交互的实践案例,主要用于实现用户界面的动态筛选和过滤。这里,我们主要探讨的是使用JavaScript(js)和JavaServer Pages(jsp)来创建一个具有三级联动...
### JSP实现级联菜单详解 #### 一、概述 级联菜单是Web应用程序中常见的一种交互设计方式,尤其在需要展示多层级数据结构时,如省份-城市选择器等场景下非常实用。通过级联菜单,用户可以方便地根据上一级的选择来...
在IT领域,尤其是在Web开发中,二级联动菜单是一种常见的交互设计,用于呈现具有层次关系的数据。这个案例中,我们讨论的是如何使用JSP(JavaServer Pages)和JavaScript来实现这样的功能,以提高用户体验并减少不必...
### 使用Ajax+JSON实现多级联动菜单的知识点详解 #### 一、背景介绍与概念解析 随着互联网技术的发展,用户对交互式应用的需求日益增长。RIA(Rich Internet Applications)概念的提出更是加速了这一趋势。其中,...
在本实例中,我们讨论的是一个基于JSP(JavaServer Pages)实现的二级联动菜单。JSP是一种动态网页技术,它允许开发人员在HTML或XML文档中嵌入Java代码,以便服务器端处理数据并生成动态内容。 二级联动菜单的工作...
在实现三级联动菜单时,开发者通常会使用JavaScript、Java以及JSP(JavaServer Pages)等技术。下面将详细介绍这些技术在创建三级联动菜单中的应用。 1. **JavaScript**:作为客户端脚本语言,JavaScript主要负责...
在网页开发中,二级联动是一种常见的交互设计,通常用于下拉菜单或选择框,使得用户在选择一级选项后,二级选项会动态更新以提供相关的子选项。在这个"超简单的ajax+jsp实现2级联动"的例子中,我们将探讨如何利用...
这个是找到的一个3级下拉菜单,能否改成n及扩展并且随数据库内容动态更新的呢?而且最好是JSP的
JSP 结合 JS 实现三级菜单联动 在 Web 开发中,三级菜单联动是非常常见的需求,例如在选择学校、专业、班级时,需要三级菜单联动来选择正确的信息。下面我们将介绍如何使用 JSP 结合 JS 实现三级菜单联动。 JSP ...
1. JSP文件:如`menu.jsp`,这是主要的展示菜单的页面,其中包含Java脚本和HTML代码。 2. Java类文件:可能有DAO(数据访问对象)类用于与数据库交互,如`MenuDAO.java`。 3. SQL脚本:用于创建数据库表结构,如`...
在Struts2中,实现联动菜单的关键在于Action类、结果页面(JSP)和配置文件(struts.xml)。Action类处理用户请求,通过调用DAO(数据访问对象)与Oracle数据库进行交互,获取相应的数据。DAO层负责执行SQL查询,...
在这个事例中,我们将深入探讨如何在JSP中利用 `useBean` 指令创建并管理JavaBeans,以及如何通过 `session` 对象来处理用户会话。 **1. JSP useBean指令** `<jsp:useBean>` 是JSP中的一个动作元素,用于在JSP页面...