三:简单三级联动
<form method="post" name="myform">
<select name="classid" onchange="select()"></select>
<select name="suid"></select>
<select name="gid"></select>
</form>
<script language="javascript">
<!--
var arrText = new Array(5);
var arrValue = new Array(arrText.length);
function objSetOption(select1, select2, select3) {
this.select1 = select1;
this.select2 = select2;
this.select3 = select3;
}
arrText[0]= new objSetOption("选择1:", "选择2_1:,选择2_2:", "选择3_1:,选择3_2:");
arrText[1] = new objSetOption("论文:1", "语文:1,数学:2,英语:3", "初中:2,高中:3");
arrText[2] = new objSetOption("例题:2", "显示b2_1:值b2_1,显示b2_2:值b2_2", "显示b3_1:值b3_1,显示b3_2:值b3_2");
arrText[3] = new objSetOption("显示c:值c", "显示c2_1:值c2_1,显示c2_2:值c2_2", "显示c3_1:值c3_1,显示c3_2:值c3_2");
arrText[4] = new objSetOption("显示d:值d", "显示d2_1:值d2_1,显示d2_2:值d2_2", "显示d3_1:值d3_1,显示d3_2:值d3_2");
arrText[5] = new objSetOption("显示e:值e", "显示e2_1:值e2_1,显示e2_2:值e2_2", "显示e3_1:值e3_1,显示e3_2:值e3_2");
function select(sValue1, sValue2, sValue3) {
var eltSelect1 = document.myform.classid;
var eltSelect2 = document.myform.suid;
var eltSelect3 = document.myform.gid;
var arrSelect1, arrSelect2, arrSelect3;
var arrData1, arrData2, arrData3;
with(eltSelect1) {
var strSelect = options[selectedIndex].value;
}
for(i = 0;i < arrText.length;i ++) {
arrSelect1 = arrText[i].select1;
arrData1 = arrSelect1.split(":");
if (arrData1[1] == strSelect) {
arrSelect2 = (arrText[i].select2).split(",");
for(j = 0;j < arrSelect2.length;j++) {
arrData2 = arrSelect2[j].split(":");
with(eltSelect2) {
length = arrSelect2.length;
options[j].text = arrData2[0];
options[j].value = arrData2[1];
if (arrData2[1] == sValue2) {
options[j].selected = true;
}
}
}
arrSelect3 = (arrText[i].select3).split(",");
for(j = 0;j < arrSelect3.length;j++) {
arrData3 = arrSelect3[j].split(":");
with(eltSelect3) {
length = arrSelect3.length;
options[j].text = arrData3[0];
options[j].value = arrData3[1];
if (arrData3[1] == sValue3) {
options[j].selected = true;
}
}
}
break;
}
}
}
function init(sValue1, sValue2, sValue3) {
var eltSelect1 = document.myform.classid;
var eltSelect2 = document.myform.suid;
var eltSelect3 = document.myform.gid;
var arrSelect1, arrSelect2, arrSelect3;
var arrData1, arrData2, arrData3;
if (eltSelect1 != undefined && eltSelect2 != undefined && eltSelect3 != undefined) {
with(eltSelect2) {
arrSelect2 = (arrText[0].select2).split(",");
length = arrSelect2.length;
for(i = 0;i < length;i ++) {
arrData2 = arrSelect2[i].split(":");
options[i].text = arrData2[0];
options[i].value = arrData2[1];
}
}
with(eltSelect3) {
arrSelect3 = (arrText[0].select3).split(",");
length = arrSelect3.length;
for(i = 0;i < length;i ++) {
arrData3 = arrSelect3[i].split(":");
options[i].text = arrData3[0];
options[i].value = arrData3[1];
}
}
with(eltSelect1) {
length = arrText.length;
for(i = 0;i < arrText.length;i ++) {
arrSelect1 = arrText[i].select1;
arrData1 = arrSelect1.split(":");
options[i].text = arrData1[0];
options[i].value = arrData1[1];
if (arrData1[1] == sValue1) {
options[i].selected = true;
select("", sValue2, sValue3);
}
}
}
}
}
//init();
//默认初始化 [转载著名:http://w3c_web600_net]
init("2", "值b2_1", "值b3_2");
//更改后默认初始化
// -->
</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四级联动菜单` 的实现结合了前端的Ajax技术、JSON解析、DOM操作,以及后端的JSP和数据库操作,展示了Web开发中前后端协作的重要性和动态交互的实现方式。这样的功能在很多需要地理信息输入的场景中都...
### JSP从数据库获取数据填充下拉框实现二级联动菜单的方法 #### 一、引言 在Web开发中,为了提高用户体验和数据处理效率,经常需要实现动态数据填充功能,尤其是对于多级联动的选择菜单。本文将详细介绍如何利用...
在IT行业中,"js+jsp三级联动 源码"是一个常见的前端与后端交互的实践案例,主要用于实现用户界面的动态筛选和过滤。这里,我们主要探讨的是使用JavaScript(js)和JavaServer Pages(jsp)来创建一个具有三级联动...
### JSP实现级联菜单详解 #### 一、概述 级联菜单是Web应用程序中常见的一种交互设计方式,尤其在需要展示多层级数据结构时,如省份-城市选择器等场景下非常实用。通过级联菜单,用户可以方便地根据上一级的选择来...
### 使用Ajax+JSON实现多级联动菜单的知识点详解 #### 一、背景介绍与概念解析 随着互联网技术的发展,用户对交互式应用的需求日益增长。RIA(Rich Internet Applications)概念的提出更是加速了这一趋势。其中,...
在本实例中,我们讨论的是一个基于JSP(JavaServer Pages)实现的二级联动菜单。JSP是一种动态网页技术,它允许开发人员在HTML或XML文档中嵌入Java代码,以便服务器端处理数据并生成动态内容。 二级联动菜单的工作...
在实现三级联动菜单时,开发者通常会使用JavaScript、Java以及JSP(JavaServer Pages)等技术。下面将详细介绍这些技术在创建三级联动菜单中的应用。 1. **JavaScript**:作为客户端脚本语言,JavaScript主要负责...
在IT领域,尤其是在Web开发中,二级联动菜单是一种常见的交互设计,用于呈现具有层次关系的数据。这个案例中,我们讨论的是如何使用JSP(JavaServer Pages)和JavaScript来实现这样的功能,以提高用户体验并减少不必...
这个是找到的一个3级下拉菜单,能否改成n及扩展并且随数据库内容动态更新的呢?而且最好是JSP的
在网页开发中,二级联动是一种常见的交互设计,通常用于下拉菜单或选择框,使得用户在选择一级选项后,二级选项会动态更新以提供相关的子选项。在这个"超简单的ajax+jsp实现2级联动"的例子中,我们将探讨如何利用...
JSP 结合 JS 实现三级菜单联动 在 Web 开发中,三级菜单联动是非常常见的需求,例如在选择学校、专业、班级时,需要三级菜单联动来选择正确的信息。下面我们将介绍如何使用 JSP 结合 JS 实现三级菜单联动。 JSP ...
【标题】:“jsp动态菜单---自定义的一个菜单” 在网页开发中,动态菜单是一种常见的功能,它可以基于用户权限、操作状态等因素实时更新显示内容。JSP(JavaServer Pages)是Java平台上的一个用于创建动态web内容的...
在Struts2中,实现联动菜单的关键在于Action类、结果页面(JSP)和配置文件(struts.xml)。Action类处理用户请求,通过调用DAO(数据访问对象)与Oracle数据库进行交互,获取相应的数据。DAO层负责执行SQL查询,...
在这个事例中,我们将深入探讨如何在JSP中利用 `useBean` 指令创建并管理JavaBeans,以及如何通过 `session` 对象来处理用户会话。 **1. JSP useBean指令** `<jsp:useBean>` 是JSP中的一个动作元素,用于在JSP页面...