城市三级联动

最新推荐文章于 2025-01-25 15:07:16 发布

原创最新推荐文章于 2025-01-25 15:07:16 发布 · 249 阅读

CC 4.0 BY-SA版权

想必大家都在各种网站上都注册过账号，在填写户籍那一栏的时候，前面选择的不同后面的选项也不同，用的下拉框就属于三级联动，这个主要考察的是DOM里的内容，这个的难点主要有两点，第一就是整理所有的城市，我这里有个整理好的js文件就直接拿来用了，大致就是这样的
这里没有描述

这个没有什么技术含量就是有点麻烦，第二就是其中父子层级的关系，这个如果出错就很容易出现拿不到所选省市的城市，或者出现拿错的情况。下面直接看代码
因为比较简单就直接把js写一起了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="city-data.js"></script>
	</head>
	<body>
		省：<select id="provice">
			<option>--请选择--</option>
		</select>
		市：<select id="city">
			<option>--请选择--</option>
		</select>
		区：<select id="area">
			<option>--请选择--</option>
		</select>
		<script>
			var provice = document.getElementById("provice");
			var city1 = document.getElementById("city");
			var area = document.getElementById("area");
			var children;
			var data = city[0];
			for(var i in data){
				//实例化，data[i].name为文本值，i为value值
				var option = new Option(data[i].name,i);
				provice.appendChild(option)
			}
			provice.onchange = function(){
				//城市选择的长度变为1个
				city1.options.length = 1;
				//把当前省份的值提取出来
				var int1 = this.value;
				//把市拿出来
				children = data[int1].child;
				for(var j in children){
					var cityoption = new Option(children[j].name,j);
					city1.appendChild(cityoption);
				}
			}
			city1.onchange = function(){
				area.options.length = 1;
				var int2 = this.value;
				children = data[provice.value].child[int2].child;
				for(var j in children){
					var areaoption = new Option(children[j]);
					area.appendChild(areaoption);
				}
			}
			

		</script>
	</body>
</html>