二:简单的一组联动菜单
联动菜单一(example):<SELECT name=example style="width=90px" onchange="chinaredirect(this.selectedIndex)">
<OPTION selected>请选择地区</OPTION>
<OPTION>华北地区</OPTION>
<OPTION>华东地区</OPTION>
<option>华南地区</option>
<option>华中地区</option>
</SELECT><br>
联动菜单二(stage2):<SELECT name=stage2 style="width=90px"></SELECT><br>
脚本,可拷贝到网页代码的任意地方:<br>
<SCRIPT language=JavaScript>
<!--
//初始化程序
//取得联动菜单一(example为联动菜单一名字)选项个数
var chinagroups=document.all.item("example").options.length;
//动态建与联动菜单一(example)选项个数匹配的选项数组
var chinagroup=new Array(chinagroups);
//为每个选项组建立动态子选项对象
for (i=0; i<chinagroups; i++) chinagroup[i]=new Array();
/*
下面是添加联动菜单二的选项,对应参数为以
chinagroup[0][0]=new Option("请选择地区","");
来说明,[0][0],前面的[0]指与联动菜单一的第一项,后一个[0]指与
联动菜单一第一项对应的联动菜单二的第一项的内容,其中
new Option("请选择地区","");
中的"请选择地区"为显示内容,""为与该选项对应的值(value),只要
按照这个规律添加相应选项即可。
*/
//与联动菜单一对应的第一个选项“请选择地区”对应的联动菜单二的选项
chinagroup[0][0]=new Option("请选择地区","");
//与联动菜单一对应的第二个选项“请选择地区”对应的联动菜单二的选项
chinagroup[1][0]=new Option("请选择城市","请选择城市");
chinagroup[1][1]=new Option("北京","54511");
chinagroup[1][2]=new Option("天津","54527");
chinagroup[1][3]=new Option("石家庄","53698");
//与联动菜单一对应的第三个选项“请选择地区”对应的联动菜单二的选项
chinagroup[2][0]=new Option("请选择城市","请选择城市");
chinagroup[2][1]=new Option("北京","54511");
chinagroup[2][2]=new Option("天津","54527");
//与联动菜单一对应的第四个选项“请选择地区”对应的联动菜单二的选项
chinagroup[3][0]=new Option("请选择城市","请选择城市");
chinagroup[3][1]=new Option("合肥","58321");
chinagroup[3][2]=new Option("上海","58362");
//与联动菜单一对应的第五个选项“请选择地区”对应的联动菜单二的选项
chinagroup[4][0]=new Option("请选择城市","请选择城市");
chinagroup[4][1]=new Option("福州","58847");
chinagroup[4][2]=new Option("南宁","59431");
//初始化结束
//改变联动菜单二的选项的函数
function chinaredirect(x)
{
//取得联动菜单二的对象(stage2为联动菜单二名字)
var chinatemp=document.all.item("stage2");
//把联动菜单二的选项逐一置空(删除)
for (m=chinatemp.options.length-1;m>0;m--)
chinatemp.options[m]=null ;
//采用逐一建立联动菜单二的新选项。
for (i=0;i<chinagroup[x].length;i++)
chinatemp.options[i]=new Option(chinagroup[x][i].text,chinagroup[x][i].value);
//设置联动菜单二的第一个选项为选择项
chinatemp.options[0].selected=true;
}
//-->
</SCRIPT>
分享到:
相关推荐
【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多级联动菜单】是一种常见的前端交互设计,它允许用户在选择某个菜单项时,自动更新下一级菜单的内容,以此类推,实现多级菜单之间的动态关联。这种技术广泛应用于网页表单填写、筛选器等场景,为用户提供更加...
在这个"超简单的ajax+jsp实现2级联动"的例子中,我们将探讨如何利用AJAX(Asynchronous JavaScript and XML)技术和JavaServer Pages (JSP)来实现这种功能。 首先,我们需要了解AJAX的基本原理。AJAX允许网页在不...
### JSP从数据库获取数据填充下拉框实现二级联动菜单的方法 #### 一、引言 在Web开发中,为了提高用户体验和数据处理效率,经常需要实现动态数据填充功能,尤其是对于多级联动的选择菜单。本文将详细介绍如何利用...
总的来说,`ajax四级联动菜单` 的实现结合了前端的Ajax技术、JSON解析、DOM操作,以及后端的JSP和数据库操作,展示了Web开发中前后端协作的重要性和动态交互的实现方式。这样的功能在很多需要地理信息输入的场景中都...
### JSP实现级联菜单详解 #### 一、概述 级联菜单是Web应用程序中常见的一种交互设计方式,尤其在需要展示多层级数据结构时,如省份-城市选择器等场景下非常实用。通过级联菜单,用户可以方便地根据上一级的选择来...
在Struts2中,实现联动菜单的关键在于Action类、结果页面(JSP)和配置文件(struts.xml)。Action类处理用户请求,通过调用DAO(数据访问对象)与Oracle数据库进行交互,获取相应的数据。DAO层负责执行SQL查询,...
在IT行业中,"js+jsp三级联动 源码"是一个常见的前端与后端交互的实践案例,主要用于实现用户界面的动态筛选和过滤。这里,我们主要探讨的是使用JavaScript(js)和JavaServer Pages(jsp)来创建一个具有三级联动...
### 使用Ajax+JSON实现多级联动菜单的知识点详解 #### 一、背景介绍与概念解析 随着互联网技术的发展,用户对交互式应用的需求日益增长。RIA(Rich Internet Applications)概念的提出更是加速了这一趋势。其中,...
在IT领域,尤其是在Web开发中,二级联动菜单是一种常见的交互设计,用于呈现具有层次关系的数据。这个案例中,我们讨论的是如何使用JSP(JavaServer Pages)和JavaScript来实现这样的功能,以提高用户体验并减少不必...
在实现三级联动菜单时,开发者通常会使用JavaScript、Java以及JSP(JavaServer Pages)等技术。下面将详细介绍这些技术在创建三级联动菜单中的应用。 1. **JavaScript**:作为客户端脚本语言,JavaScript主要负责...
在本实例中,我们讨论的是一个基于JSP(JavaServer Pages)实现的二级联动菜单。JSP是一种动态网页技术,它允许开发人员在HTML或XML文档中嵌入Java代码,以便服务器端处理数据并生成动态内容。 二级联动菜单的工作...
在Struts2中实现级联联动菜单,我们需要以下几个关键步骤: 1. **模型设计**: - 首先,定义菜单的数据模型,通常包括ID、名称和父ID等字段。这些数据可能存储在数据库中,通过服务层接口获取。 - 创建一个实体类...
这个是找到的一个3级下拉菜单,能否改成n及扩展并且随数据库内容动态更新的呢?而且最好是JSP的
JSP 结合 JS 实现三级菜单联动 在 Web 开发中,三级菜单联动是非常常见的需求,例如在选择学校、专业、班级时,需要三级菜单联动来选择正确的信息。下面我们将介绍如何使用 JSP 结合 JS 实现三级菜单联动。 JSP ...
【标题】:“jsp动态菜单---自定义的一个菜单” 在网页开发中,动态菜单是一种常见的功能,它可以基于用户权限、操作状态等因素实时更新显示内容。JSP(JavaServer Pages)是Java平台上的一个用于创建动态web内容的...