使用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>
实现效果如下，觉得对你有帮助，点个赞哈。关注下也行，一起学习！
1359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
