<script>
//构造2个数组
var detail_show = new Array();
var detail_value = new Array();
detail_show[0] = new Array();
detail_value[0] = new Array();
detail_show[0][0] = '上海';
detail_value[0][0] = '0101';
detail_show[0][1] = '北京';
detail_value[0][1] = '0102';
detail_show[0][2] = '广州';
detail_value[0][2] = '0103';
detail_show[1] = new Array();
detail_value[1] = new Array();
detail_show[1][0] = '纽约';
detail_value[1][0] = '0201';
detail_show[1][1] = '华盛顿';
detail_value[1][1] = '0202';
detail_show[1][2] = '加州';
detail_value[1][2] = '0203';
detail_show[2] = new Array();
detail_value[2] = new Array();
detail_show[2][0] = '伦敦';
detail_value[2][0] = '0301';
detail_show[2][1] = '利物浦';
detail_value[2][1] = '0302';
detail_show[2][2] = '伯明翰';
detail_value[2][2] = '0303';
function change(target) {
//获取级联的下拉列表
var deselect = document.getElementById("deselect");
//清空第二个下拉列表的选项
deselect.innerHTML = null;
var m = target.selectedIndex;
if (m >= 0) {
for (i = 0; i < detail_show[m].length; i++) {
//循环构造很多option,然后放在指定的option中
//new Option(show,value)可以构造一个一个的option
deselect.options[i] = new Option(detail_show[m][i],
detail_value[m][i]);
}
//设置默认选中第一个列表项
deselect.options[0].selected = true;
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>级联菜单</title>
<meta name="author" content="Yeeku.H.Lee" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
<h2>
级联菜单
</h2>
<form id="flyform">
<select name="caselect" id="caselect" style="width: 80"
onchange="change(this)";>
<option value="01">
中国
</option>
<option value="02">
美国
</option>
<option value="03">
英国
</option>
</select>
<select name="deselect" id="deselect" style="width: 150">
</select>
</form>
</div>
</body>
</html>
分享到：
相关推荐
级联下拉框是一种常见的用户界面元素，常用于在多个相关选项之间建立关联，例如国家、省份、城市的三级选择。这种交互方式可以帮助用户快速浏览和选择层级结构中的数据，而无需打开多个独立的下拉菜单。在网页开发或...
本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX（异步JavaScript和XML）技术和Servlet进行交互，以实现在选择第一个下拉框的值后，第二个下拉框自动更新并显示相关数据。以下是对这个项目的详细...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
这个例子中的"php框架thinkphp实现js（ajax）无限添加级联下拉框"是关于如何利用ThinkPHP和JavaScript（AJAX）技术来创建一个动态的、可以无限级联的下拉菜单系统。下面我们将深入探讨这一主题。 1. **ThinkPHP框架...
7. **文件名称“级联下拉菜单”**：这个文件可能是包含实现级联下拉框所需的所有代码的资源包，包括HTML模板、CSS样式文件、JavaScript脚本以及可能的服务器端代码。 总结来说，实现一个跨浏览器的级联下拉框涉及...
本文将详细解析"js css jquery 树形菜单 级联下拉框 自动弹出菜单 导航栏 跑马灯 js特效"这一主题中的各个知识点，帮助你理解和应用这些技术。 1. **JavaScript**: JavaScript是一种轻量级的解释型编程语言，主要...
三级级联下拉框则是指三个互相联动的下拉菜单，当用户在一个下拉框中选择一个选项时，其他关联的下拉框会根据所选选项动态更新其内容。在本教程中，我们将探讨如何使用JavaScript库JQuery来实现这样的功能。 首先，...
本主题将深入探讨jQuery在创建可编辑表格、实现横向和纵向菜单、构建标签页、设计级联下拉框以及窗口管理方面的应用。 首先，让我们谈谈jQuery可编辑表格。在网页上展示数据时，有时需要用户能够直接在表格中进行...
struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
在创建级联下拉框时，通常需要以下步骤： 1. **服务器端准备**： - 配置DWR：在项目中引入DWR库，配置dwr.xml文件，声明允许客户端调用的Java方法。 - 编写Java服务：根据数据库结构（例如Ms SQL 2005中的表和...
通过HTML构建了级联下拉框的基本结构，使用了select元素来创建下拉菜单，并通过CSS控制了其基本的样式。在这个实例中，汽车厂商和汽车类型的下拉列表被设置为内联显示，并通过CSS隐藏了汽车类型的下拉列表，直到汽车...
在本文中，我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中，让用户能够从相关联的分类中选择选项，例如省份与城市的选择。 首先，让我们了解这三个技术的核心...
在AJAX级联菜单中，用户通常会选择一个主类别，然后基于这个选择，相关的子类别会即时地在下一个下拉框中加载，无需页面刷新。这种交互方式提供了流畅的用户体验，提高了网页的响应速度和效率。 在给定的文件中，...
在实现Ajax级联菜单时，通常涉及以下几个关键知识点： 1. **JavaScript/jQuery**：JavaScript是实现Ajax功能的主要语言，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。使用jQuery...
当用户选择一个菜单项时，通过Ajax向服务器发送请求，获取对应的子菜单列表，并在前端动态更新下拉菜单。 具体到本例的代码，`src`目录可能包含以下几个关键文件： - `Category.java`: 定义菜单实体类，包含`id`、`...
在JavaScript中，实现这样的联动效果通常需要监听下拉菜单的改变事件，当用户选择了一个新的值时，通过AJAX向服务器发送请求，获取下一级别的数据，然后动态更新下拉菜单的选项。描述中提到的`citySele`变量可能是...
这是我在网上查找到的php实现三级级联下拉框的资料，共享个大家，大家一起进步，具体内容如下 index.php: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">...
Js Select下拉框级联菜单，一共支持5级联动，相信够用了，这种菜单不用多介绍吧，后一级的值与前一级是父、子关系，该示例还演示了动态添加菜单、减少菜单的功能，还有显示/不显示空值的功能，如演示截图所示。
总的来说，实现Ajax级联菜单涉及数据库设计、服务器端编程和客户端JavaScript交互。通过这种方式，我们能够提供更加流畅和高效的用户交互体验，提高网站的性能和用户满意度。同时，使用合适的工具，如SQLyog ...
本文将深入探讨如何使用Bootstrap构建级联下拉菜单，并结合jQuery、Ajax以及Spring MVC实现动态数据加载。 首先，Bootstrap级联下拉菜单的基础构建依赖于Bootstrap的下拉菜单组件（Dropdown）。在HTML结构中，我们...