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

首先我们需要从网上下载一个全国城市三级联动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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值