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
    评论
实现全国城市三级联动下拉框可以使用Vue.js的组件化开发方式,将下拉框封装成一个组件,然后通过组件之间的通信实现三级联动效果。 首先,需要准备城市数据。可以从一些开放的API获取,这里推荐使用高德地图API获取全国城市数据。具体操作可以参考高德地图开发文档,这里不再赘述。 然后,在Vue项目中创建城市选择组件。在组件中定义三个下拉框,分别绑定省、市、区/县的数据源,并设置默认值。当省下拉框的值改变时,触发change事件,根据省的value值获取对应的市数据,更新市下拉框的数据源和默认值。同理,当市下拉框的值改变时,触发change事件,根据市的value值获取对应的区/县数据,更新区/县下拉框的数据源和默认值。 下面是示例代码: ```html <template> <div> <select v-model="province" @change="selectProvince"> <option v-for="p in provinces" :value="p.adcode">{{ p.name }}</option> </select> <select v-model="city" @change="selectCity"> <option v-for="c in cities" :value="c.adcode">{{ c.name }}</option> </select> <select v-model="district"> <option v-for="d in districts" :value="d.adcode">{{ d.name }}</option> </select> </div> </template> <script> export default { data() { return { provinces: [], // 省数据源 cities: [], // 市数据源 districts: [], // 区/县数据源 province: '', // 省默认值 city: '', // 市默认值 district: '' // 区/县默认值 } }, mounted() { // 获取省数据,默认显示第一个省的数据 this.$axios.get('/api/province').then(res => { this.provinces = res.data this.province = this.provinces[0].adcode this.selectProvince() }) }, methods: { selectProvince() { // 根据省的adcode获取市数据,默认显示第一个市的数据 this.$axios.get(`/api/city?adcode=${this.province}`).then(res => { this.cities = res.data this.city = this.cities[0].adcode this.selectCity() }) }, selectCity() { // 根据市的adcode获取区/县数据,默认显示第一个区/县的数据 this.$axios.get(`/api/district?adcode=${this.city}`).then(res => { this.districts = res.data this.district = this.districts[0].adcode }) } } } </script> ``` 这里使用了axios库发送http请求获取城市数据,可以根据实际情况选择其他库或原生的XMLHttpRequest对象。 最后,将城市选择组件引入到需要使用的页面中即可。 ```html <template> <div> <h2>请选择城市</h2> <city-select></city-select> </div> </template> <script> import CitySelect from '@/components/CitySelect' export default { components: { CitySelect } } </script> ``` 这样就完成了全国城市三级联动下拉框的实现

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值