js利用数组做省级联动

最新推荐文章于 2024-03-08 11:51:56 发布

lilutongxue

最新推荐文章于 2024-03-08 11:51:56 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签： javascript 省级联动

本文链接：https://blog.csdn.net/Vanessa_Li/article/details/76392490

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

创建数组
var 数组名称=new Array(size);

Array:数组的关键字。

size:数组中可存放的总数，可以动态改变数组长度。

JavaScript Array数组对象

用数组实现省级（两层）联动

window.onload = function(){
	//定义数组并为其初始化
	var cityList = new Array();
	//下标定义为河北省，可把下标定义为0，1，然后再html中第一个selected中加入<option value="河北省">河北省</option>
	cityList['河北省'] = ['唐山市','廊坊市'];
	cityList['河南省'] = ['洛阳市','郑州市'];
	cityList['湖北省'] = ['武汉市','宜昌市'];
	
	var menu1 = document.getElementById("menu1");
	var menu2 = document.getElementById("menu2");
	
	//为第一级和第二级下拉框进行初始化
	for(var i in cityList){//i为下标
		//向下拉框中添加Option选项，option中有两个值，一个value，一个中间的显示值
		menu1.add(new Option(i,i));
	}
	menu2.add((new Option("--","--")));
	
	//捕获下拉列表框一的改变事件
	menu1.onchange = function(){
		//获取menu1选中的下拉项
		var menu1Val = menu1.value;
		//清空列表框的Option选项
		menu2.length = 0;
		for(var j in cityList){
			for(var k in cityList[j]){
				if(menu1Val==j){
					menu2.add(new Option(cityList[j][k],cityList[j][k]));
				}
			}
		}
	}
}<body>
	<select id="menu1"></select>-<select id="menu2"></select>
</body>