<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联动选择下拉框</title>
<style type="text/css">
select {
width: 100px;
}
</style>
<script type="text/javascript">
//二维数组
var address = [
['请选择市'],
['成都','眉山','洪雅'],
['东城区','朝阳区','丰台区']
];
//另一种定义方式
//var coll = {"":[],"":[]};
function province() {
//第1个select框
var oSelectNode = document.getElementById("first");
//第2个select框
var oSubSelectNode = document.getElementById("second");
//第1个select框被选中的元素在集合中的位置
var index = oSelectNode.selectedIndex;
//从二维数组中取出对应的一维数组
var secondAddress = address[index];
//清空子菜单中的选项，直接将长度设置为0即可！
oSubSelectNode.length = 0;
//按对应数组中的元素添加到select中
for(var i=0;i<secondAddress.length;i++) {
var oOption = document.createElement("option");
oOption.innerHTML = secondAddress[i];
oSubSelectNode.add(oOption);
}
}
</script>
</head>
<body>
<div>
<select id="first" onchange="province()">
<option>请选择省</option>
<option>四川</option>
<option>北京</option>
</select>
<select id="second">
<option>请选择市</option>
</select>
</div>
</body>
</html>
分享到：
相关推荐
在ASP（Active Server Pages）开发中，二级联动菜单是一种常见的交互设计，用于提供层次结构的选项选择，例如在产品分类、地区选择等场景。在这个案例中，我们将探讨如何使用ASP和数据库来实现一个二级联动菜单。 ...
在本场景中，"ASP+ACC二级联动菜单"是指使用ASP技术和Microsoft Access（ACC）数据库构建的二级交互式下拉菜单。这个菜单系统通常会在用户选择一级菜单项时动态加载并显示相应的二级菜单项，提供更流畅的用户体验。 ...
在网页设计中，二级联动菜单是一种常见的交互设计模式，它主要用于地区选择、分类导航等场景。"asp无刷新二级联动菜单"是指使用ASP（Active Server Pages）技术实现的，在用户选择一级菜单时，二级菜单无需刷新整个...
JavaScript二级联动菜单是一种常见的网页交互设计，用于提供更精细化的导航或数据筛选。在电子商务网站、行政管理系统等中，我们经常可以看到这种菜单形式，它能够根据用户在一级菜单中的选择，动态加载并显示相应的...
下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先，联动菜单的基本概念是：当用户在一个下拉菜单（一级菜单）中选择某个选项时，另一个下拉菜单（二级菜单）的内容会根据所选的选项动态...
在IT行业中，数据库关联的二级联动菜单是一种常见的交互设计，特别是在网页应用中，它能够帮助用户高效地筛选和选择信息。这个"一个和数据库关联的，二级联动菜单示例ajax实现"是一个实用的代码示例，它展示了如何...
js 二级联动菜单 路过的高手指点，低手分享js 二级联动菜单 路过的高手指点，低手分享
在IT领域，二级联动菜单是一种常见的用户界面设计元素，它常用于导航或数据筛选，特别是在网站和应用程序中。二级联动菜单通常由两个关联的下拉菜单组成，其中一个菜单的选择会影响另一个菜单的内容。这种交互设计...
"可跳转回首页的CSS二级联动菜单"是一个典型的网页交互元素，主要用于提升用户体验，使得用户能够轻松地在网站的各个层级之间切换，并且通过一个明显的链接快速返回首页。这个主题涉及到的主要知识点包括CSS（层叠...
最简单的二级联动源码下载，可以直接使用。
在这个Util类中，开发者集成了三种不同类型的PopupWindow：二级联动菜单、ListView形式的菜单以及GridView形式的菜单，大大简化了在项目中使用PopupWindow的操作。 首先，我们来详细了解一下`PopupWindow`。它是一...
在IT领域，二级联动菜单是一种常见的用户界面设计模式，它用于提供更为精细化的筛选或选择功能。在这种菜单中，选择一级菜单的一项会触发二级菜单的显示，二级菜单中的选项通常与一级菜单的选择有关联。这样的设计...
在IT领域，二级联动菜单是一种常见的用户界面设计模式，它常用于网站或应用程序中，以帮助用户在多个相关选项间进行选择。在这个“二级联动菜单（jsp mysql）”的实例中，我们将探讨如何使用JavaServer Pages (JSP) ...
在网页设计中，二级联动菜单是一种常见的交互元素，常用于网站导航，它允许用户通过选择一级菜单后自动展现相关的二级菜单，提高用户体验和操作效率。 “二级联动菜单”是指在一个下拉菜单中，当用户选择一个选项时...
二级联动菜单
一个很简单的二级联动下拉菜单实例,一看就懂