使用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>
实现效果如下,觉得对你有帮助,点个赞哈。关注下也行,一起学习!