使用Jquery实现三级联动

         使用Jquery实现三级联动,首先大家可以从网络上获取一份全国省市区的JSON数据,这里我展示部分,

       获取JSON数据后,首先简单写一个页面,这里我简单写几个主要标签,如下图。

                                                             

          干货先上,代码如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select id="prov">
		<option>请选择省份</option>
	</select>
	<select id="city">
		<option>请选择城市</option>
	</select>
	<select id="country">
		<option>请选择县区</option>
	</select>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="city.js"></script>
	<script type="text/javascript">
		$(function(){
			var prov = $('#prov');
			var city =$('#city');
			var country = $('#country');
			var currentProv = 0; //获取当前省份的索引值,用于获取当前省份的城市列表
			var currentCity = 0;	//获取当前市的索引值,用用获取当前市的县区
			/*
			加载网页立即执行获取当前省份信息
			*/
			(function showProv(){
					for(let i=0;i<provice.length;i++){
						prov.append('<option ' + 'value = ' + i + '>' + provice[i].name + '</option>');
					}
			})();
			/*
			当省份改变时触发事件,获取当前省份的市列表
			*/
			prov.change(function(){
				currentProv = $("#prov").find('option:selected').val();
				$("#city").html('<option>请选择城市</option>');
				$('#country').html('<option>请选择县区</option>');
				var cityLen = provice[currentProv].city.length;
				for(let i=0;i<cityLen;i++){
					city.append('<option ' + 'value = ' + i + '>' + provice[currentProv].city[i].name + '</option>')
				}
			})
			/*
			当市改变城市触发事件,获取当前市的县区列表
			*/
			city.change(function(){
				currentCity = $("#city").find('option:selected').val();
				$('#country').html('<option>请选择县区</option>');
				var countryLen = provice[currentProv]["city"][currentCity].districtAndCounty.length;
				for(let i=0;i<countryLen;i++){
					country.append('<option ' + 'value = ' + i + '>' + provice[currentProv]["city"][currentCity].districtAndCounty[i] + '</option>')
				}
			})
		})

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

 实现效果如下,觉得对你有帮助,点个赞哈。关注下也行,一起学习!

  • 8
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值