使用Jquery实现三级联动
程序员文章站
2022-04-03 18:01:24
...
使用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>
实现效果如下，觉得对你有帮助，点个赞哈。关注下也行，一起学习！
推荐阅读
-
jQuery ajax实现省市县三级联动
-
jQuery JSON实现无刷新三级联动实例探讨
-
使用jquery模拟a标签的click事件无法实现跳转的解决
-
Android实现三级联动下拉框 下拉列表spinner的实例代码
-
纯JSP+DWR实现三级联动下拉选择菜单实现技巧
-
Vue使用vue-area-linkage实现地址三级联动效果的示例
-
使用简洁的jQuery方法实现隔行换色功能
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
-
利用select实现年月日三级联动的日期选择效果【推荐】