使用JavaScript数组实现省份和城市的级联菜单

查看本章节

查看作业目录

需求说明：

使用数组实现省份和城市的级联菜单。具体要求如下

  • 在页面中添加城市时，根据选择的省份，动态地添加该省份的城市
  • 页面加载完毕后，第一个列表框填充“两湖两广”（湖北、湖南、广东和广西）省份，第二个列表框填充第一个省份的所有城市
  • 当选择省份时，如“湖北省”，第二个下拉列表框先清除选项，然后再填充“湖北省”的所有城市

实现思路：

  1. 在脚本中，声明一个省份数组和一个使用文字作为数组元素下标的全局数组变量，用来存储省份和城市
  2. 声明函数initProvince()，在第一个列表框中填充所有的省份名称
  3. 声明函数fillCity()，把在第一个列表框中选择的省份所对应的城市填充到第二个列表框中
  4. 在window 的onload 事件中绑定initProvince() 方法和fillCity() 方法 给第一个列表框<select> 标签的onchange 事件绑定fillCity() 方法

实现代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var provinces=new Array('湖北省','湖南省','广东省','广西省');
			var citys=new Array();
			citys['湖北省']=['武汉','黄石','宜昌','襄阳','孝感','黄冈'];
			citys['湖南省']=['长沙','衡阳','岳阳','常德','张家界','怀化'];
			citys['广东省']=['广州','深圳','珠海','汕头','佛山','江门'];
			citys['广西省']=['南宁','桂林','北海','玉林','百色','贺州'];
			function initProvince(){
				var province=document.getElementById("province");
				for (var i=0;i<provinces.length;i++) {
					var option=document.createElement("option");
					option.text=provinces[i];
					option.value=provinces[i];
					province.options.add(option);
				}
			}
			function fillCity(){
				var city=document.getElementById("city");
				city.options.length=0;
				var province=document.getElementById("province").value;
				console.log(province);
				console.log(citys[province]);
				for (var i=0;i<citys[province].length;i++){
					var option=document.createElement("option");
					option.text=citys[province][i];
					option.value=citys[province][i];
					city.options.add(option);
				}
			}
			window.onload=function(){
				initProvince();
				fillCity();
			}
		</script>
		<h2>请选择城市<br />
		省份：<select id="province" onchange="fillCity()"></select>
		城市：<select id="city"></select>
		</h2>
	</body>
</html>

 

 

posted @ 2020-11-06 23:44  明金同学  阅读(169)  评论(0)  编辑  收藏  举报