JS如何实现城市三级联动效果

最新推荐文章于 2022-08-01 10:35:47 发布

香蕉芭辣

最新推荐文章于 2022-08-01 10:35:47 发布

阅读量1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44049725/article/details/103705020

版权

首先我们需要从网上下载一个全国城市三级联动json数据格式的js文件，可能我这里的数据文件有所不同，但是写法基本都是一样的。

首先在HTML中将所需要的页面结构搭建好：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级联动</title>
	<script src="city-data.js"></script>
</head>
<body>
	省：<select id="province">
		<option value="">---请选择---</option>
	</select>
	市：<select id="city">
		<option value="">---请选择---</option>
	</select>
	区：<select id="area">
		<option value="">---请选择---</option>
	</select>
</body>
</html>

在这里插入图片描述
接着就是直接上js代码，具体注释都有讲解：

var province = document.getElementById('province'); //获取省级select选择下拉框
var newcity = document.getElementById('city');		//获取市级select选择下拉框
var area = document.getElementById('area');			//获取区级select选择下拉框
var soncity;		//定义一个变量用来存放市
var date = city[0];  //将下载好的全国城市三级联动json数据赋值给date这个变量

for(var p in date){    //用for-in循环来遍历date中的第一层数据（省级）
	var pro_option = new Option(date[p].name,p);  //实例化，date[p].name为文本值，p为value值
	province.appendChild(pro_option);       //将实例化的每一条数据动态添加到省级选择下拉框中
}

province.onchange = function(){    //当省级下拉框中的值发生改变时触发这个函数，执行其中的代码
	newcity.options.length = 1;  //城市选择的长度变为1个
	var pros = this.value;       //把当前省份的值提取出来
	soncity = date[pros].child;  //把市拿出来
	for(var c in soncity){
		var ctiy_option = new Option(soncity[c].name,c);   //实例化，date[c].name为文本值，c为value值
		newcity.appendChild(ctiy_option);     //将实例化的每一条数据动态添加到市级选择下拉框中
	}

}

newcity.onchange = function(){      //当市级下拉框中的值发生改变时触发这个函数，执行其中的代码
	area.options.length = 1;       //区的选择的长度变为1个 
	var cit = this.value;		   //把当前市的值提取出来
	sonarea = soncity[cit].child;  //把区拿出来
	for(var a in sonarea){
		var area_option = new Option(sonarea[a],a)     //实例化，date[a]为文本值，a为value值
		area.appendChild(area_option);     //将实例化的每一条数据动态添加到区级选择下拉框中
	}
}

香蕉芭辣

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS如何实现城市三级联动效果

首先我们需要从网上下载一个全国城市三级联动json数据格式的js文件，可能我这里的数据文件有所不同，但是写法基本都是一样的。首先在HTML中将所需要的页面结构搭建好：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三级联动</titl...
复制链接

扫一扫