主要思路:
每一个下拉框对应后端一个json文件,json文件设置上下文对应的键值.通过这个键值判断对应的项,然后遍历添加到下拉框中.
首先打开网页后自动获取第一个数据遍历添加到下拉框。
然后设置第一个下拉框的select change触发事件,这时获取第2个json文件,用第2个json文件里面的对应上下文键值和第一个下拉框的value值进行对比,相同的符合要求的遍历后添加到第2个下拉框。
第三个下拉框依照第二个下拉框的value值进行对比遍历添加。
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>三级联动下拉框</title>
</head>
<body>
<label for="pro">省</label>
<select name="" id="pro"></select>
<label for="city">市</label>
<select name="" id="city"></select>
<label for="area">区</label>
<select name="" id="area"></select>
<p id="addr"></p>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
$.getJSON('inc/1.json',function (data) {
// console.log(data);
var option = '<option value="">请选择</option>';
$.each(data,function (index) {
// console.log(index);
// console.log(data[index]['proId']);
// console.log(data[index]['proName']);
option +='<option value="'+ data[index]['proId'] +'">'+ data[index]['proName'] +'</option>';
});
// console.log(option);
$('#pro').append(option);
});
$('#pro').on('change',function (event) {
// 1获取当前选中的索引值
// 获取json2文件的内容 判断json2文件里面相对应值和当前选中索引值一样的 添加
// console.log(event.target.value);
// console.log($(this).val());
// console.log(this.value);
// console.log($('#pro').val());
$.getJSON('inc/2.json',function (data) {
// console.log(data);
var option = '<option value="">请选择</option>';
$.each(data,function (index) {
// console.log(data[index]['cityName']);
// console.log(event.target.value);
// 网页获取的是字串符 json文件穿过来的是整数型 所以要转换一下才可以全等 也可以把网页获取的转换 parseInt()
if (String(data[index]['proId']) === event.target.value){
// console.log(data[index]['cityId']);
option += '<option value="'+ data[index]['cityId'] +'">'+ data[index]['cityName'] +'</option>'
}
});
$('#city').html(option);
});
});
$('#city').on('change',function (event) {
$.getJSON('inc/3.json',function (data) {
// console.log(data);
var option = '<option value="">请选择</option>';
$.each(data,function (index) {
// console.log(data[index]['cityName']);
// console.log(event.target.value);
// 网页获取的是字串符 json文件穿过来的是整数型 所以要转换一下才可以全等 也可以把网页获取的转换 parseInt()
if (String(data[index]['cityId']) === event.target.value){
// console.log(data[index]['cityId']);
option += '<option value="'+ data[index]['areaId'] +'">'+ data[index]['areaName'] +'</option>'
}
});
$('#area').html(option);
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例