<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="myForm">
<select name="chapter" onchange="setSection(this.selectedIndex)"></select>
<select name="section" ></select>
</form>
<script language="javascript" type="text/javascript">
var section1 = new Array();
section1[0] = ["1.1 aaa","section1.1"]
section1[1] = ["1.2 bbb","section1.2"]
section1[2] = ["1.3 ccc","section1.3"]
var section2 = new Array();
section2[0] = ["2.1 aaa","section2.1"]
section2[1] = ["2.2 aaa","section2.2"]
section2[2] = ["2.3 aaa","section2.3"]
var section3 = new Array();
section3[0] = ["3.1 aaa","section3.1"]
section3[1] = ["3.2 aaa","section3.2"]
section3[2] = ["3.3 aaa","section3.3"]
var chapterArr = new Array();
chapterArr[0] = ["第1章","chapter1",section1];
chapterArr[1] = ["第2章","chapter2",section2];
chapterArr[2] = ["第3章","chapter3",section3];
function setSection(chapter){
for (var i=document.myForm.section.length-1;i>-1;i--) {
document.myForm.section.remove(i);
}
var arr = chapterArr[chapter][2];
for (var i=0;i<arr.length;i++){
document.myForm.section.options[i]=new Option(arr[i][0]+"<-->"+arr[i][1]);
}
}
for (var i=0;i<chapterArr.length;i++){
document.myForm.chapter.options[i]=new Option(chapterArr[i][0]+"<-->"+chapterArr[i][1]);
}
setSection(0);
</script>
</body>
</html>
分享到：
相关推荐
JavaScript级联菜单是一种常见的网页交互元素，用于呈现层次结构的数据，如导航菜单、下拉选项等。这种菜单在用户界面上提供了高效的导航，允许用户通过展开和折叠子菜单来探索多级内容。在这个主题中，我们将深入...
javascript实现省市级联菜单的效果
级联菜单的工作原理是基于客户端的javascript脚本和服务器端的数据库交互。用户选择了一个选项，然后javascript脚本将该选项的值传递给服务器，服务器端的脚本将根据该值从数据库中查询相关数据，并将其返回给客户端...
标签：javascript级联菜单, js实现级联菜单, javascript级联, jquery实现级联菜单 结合提供的部分内容，以下为知识点的详细说明： 1. JavaScript基础知识 - JavaScript是一种基于对象和事件驱动的脚本语言，通常...
通过上述步骤，我们已经了解了如何使用JSP技术和JavaScript实现一个简单的级联菜单功能。这种方法不仅适用于简单的省份-城市选择器，还可以扩展到更复杂的多级选择器中。开发者可以根据具体需求调整和优化实现细节，...
本教程将探讨如何使用JavaScript实现注册验证以及级联菜单的功能，这些技术对于创建一个高效且用户体验良好的网页至关重要。 首先，让我们详细了解一下注册验证。注册验证是为了确保用户在创建账户时输入的信息是...
在Web开发中，级联菜单通常用HTML、CSS和JavaScript实现。HTML负责定义菜单结构，CSS控制样式，JavaScript处理交互逻辑。例如，可以使用`<ul>`和`<li>`标签创建一个多级的无序列表，然后通过CSS的`display`属性控制...
主要介绍了JavaScript实现级联菜单的方法,涉及javascript页面元素操作的相关技巧,需要的朋友可以参考下
在级联菜单中，JavaScript主要负责以下任务： 1. **事件监听**：通过监听用户的鼠标悬停或点击事件，JavaScript可以触发下级菜单的显示和隐藏。 2. **DOM操作**：使用DOM（文档对象模型）API，JavaScript可以创建、...
JavaScript是实现异步级联菜单的主要编程语言，负责处理用户交互、DOM（文档对象模型）操作以及AJAX请求的发送和响应处理。在"AjaxMultiMenu.html"页面中，JavaScript代码会监听用户的点击事件，当用户选择一个菜单...
在本例中，我们讨论的是通过JavaScript实现的二级级联菜单，即在一个文本框的选择会影响到另一个文本框的可选项。 一、级联菜单的基本概念 级联菜单由多个层次的菜单项构成，通常表现为一个菜单项展开后显示下一级...
JSP与JavaScript级联菜单的概念 级联菜单是一种常见的UI组件，常用于表单或数据筛选场景，如用户选择省份后自动显示对应城市。本示例中，JSP（Java Server Pages）用于处理服务器端逻辑，而JavaScript则负责客户端...
级联菜单，也称为下拉菜单或嵌套菜单，是用户界面设计中常见的交互元素，尤其在网页和应用程序中广泛使用。它允许用户通过点击一个主菜单项来展开一系列相关子菜单，以此来访问深层的功能或信息。这种设计有助于节省...
AJAX（Asynchronous JavaScript and XML）技术可以有效地实现级联菜单的动态加载和交互，无需刷新整个页面即可获取并显示数据。 **AJAX** 是一种在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页的...
JavaScript 和 CSS 是实现级联菜单的两个关键技术。JavaScript 提供了动态交互性，允许菜单响应用户的鼠标事件，如悬停、点击等；而 CSS 负责样式设置，使菜单看起来美观且易于阅读。 在“菜单 menu JavaScript css...
在实现Ajax级联菜单时，首先需要使用JavaScript处理用户的交互事件，如点击或选择某个选项。通常，我们会为相关元素添加事件监听器，当用户触发特定行为时，执行相应的函数。 3. **XMLHttpRequest对象**： ...
常见的JavaScript库如jQuery、Vue.js、React.js等都有相应的组件或插件支持级联菜单的创建。 5. **数据绑定**：级联菜单的数据通常来自服务器，可以通过Ajax或Fetch API进行异步获取。数据结构一般包含节点ID、父...
这个实例中的“级联菜单”是AJAX应用的一个常见场景，常用于下拉选择框，其中一个选项的选择会动态地影响另一个选项的显示内容。 在AJAX级联菜单中，用户通常会选择一个主类别，然后基于这个选择，相关的子类别会...
总的来说，制作JavaScript级联下拉特效是一个很好的实践项目，它涵盖了基本的JavaScript编程、DOM操作以及响应式设计的核心概念。通过这个过程，你可以提升你的JavaScript编程技巧，并为你的网页增添更丰富的交互性...
级联菜单，也被称为下拉菜单，是一种常见的用户界面元素，尤其在网页设计中广泛使用。它通过在主菜单项下展示子菜单，为用户提供了一种高效、节省空间的方式来导航复杂的菜单结构。在这个主题中，我们将探讨如何使用...