Jquery与AJAX实现三级联动总结
通过本课程的学习，了解了通过AJAX异步请求数据的方法，学会了无刷新页面实现数据的异步加载，通过练习，对异步加载的方法进一步加深练习，也实现了三级联动和获取三级联动选择内容的功能。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax实现省市级联</title>
<script src="jquery.js"></script>
</head>
<body>
<label for="pro">省份：</label>
<select name="pro" id="pro"></select>
<label for="city">所在城市：</label>
<select name="city" id="city"></select>
<label for="area">所在地区：</label>
<select name="area" id="area"></select>
<p id="contentP"></p>
<script type="text/javascript">
var valP=""; //存放p标签内容的变量
//获取省份
$.ajax({
type: 'post', //post请求
url: '1.json', // 请求地址
data: '',
dataType: 'json',
success: function(data) {
//console.log(data);
let options='<option value="0">请选择<option>';
$.each(data,function(i){
options+='<option value="'+data[i].proId+'">'+data[i].proName+'<option>'
});
//console.log(options);
$("#pro").html(options);
$("option:not([value])").remove();
}
});
$("#pro").change(function(){
//console.log($(this).val());
let proID=$(this).val();
if(proID!="0"){
valP="您选择了："+$(this).find(":selected").text()+"省";
$('#contentP').html(valP);
}
else //选择了“请选择”
{
//清空所有数据
valP="";
$('#contentP').html(valP);//清空选择内容
$('#city').html(valP);//清空城市
$('#area').html(valP);//清空地区
return; //不要继续加载城市
}
$.ajax({
type: 'post', //post请求
url: '2.json', // 请求地址
data: '',
dataType: 'json',
success: function(data) {
//console.log(data);
let options='<option value="0">请选择<option>';
$.each(data,function(i){
if(data[i].proId==proID)
{
options+='<option value="'+data[i].cityId+'">'+data[i].cityName+'<option>'
}
});
//console.log(options);
$("#city").html(options);
$("option:not([value])").remove();
}
});
});
$("#city").change(function(){
let cityID=$(this).val();
if(cityID!="0")
{
//如果已经选择过市，则做替换操作
if(valP.indexOf("市") >= 0 )
{
//console.log(valP.substr(0,valP.lastIndexOf("省")+1)); //只取到省份
valP=valP.substr(0,valP.lastIndexOf("省")+1)+$(this).find(":selected").text()+"市";
$('#contentP').html(valP);
}
else
{
valP+=$(this).find(":selected").text()+"市";
$('#contentP').html(valP);
}
}
else //选择了“请选择”
{
//只取到省份
valP=valP.substr(0,valP.lastIndexOf("省")+1);
$('#contentP').html(valP);
$('#area').html(valP);//清空地区
return; //不要继续加载地区
}
$.ajax({
type: 'post', //post请求
url: '3.json', // 请求地址
data: '',
dataType: 'json',
success: function(data) {
//console.log(data);
let options='<option value="0">请选择<option>';
$.each(data,function(i){
if(data[i].cityId==cityID)
{
options+='<option value="'+data[i].areaId+'">'+data[i].areaName+'<option>'
}
});
//console.log(options);
$("#area").html(options);
$("option:not([value])").remove();
}
});
});
$("#area").change(function(){
let areaID=$(this).val();
if(areaID!="0")
{
//如果已经选择过市，则做替换操作
if(valP.indexOf("区") >= 0 )
{
//console.log(valP.substr(0,valP.lastIndexOf("省")+1)); //只取到城市
valP=valP.substr(0,valP.lastIndexOf("市")+1)+$(this).find(":selected").text();
$('#contentP').html(valP);
}
else
{
valP+=$(this).find(":selected").text();
$('#contentP').html(valP);
}
}
else //选择了“请选择”
{
//只取到城市
valP=valP.substr(0,valP.lastIndexOf("市")+1);
$('#contentP').html(valP);
$('#area').html(valP);//清空地区
}
});
</script>
</body>
</html>对应的1.json
[
{
"proId": 1,
"proName": "安徽"
},
{
"proId": 2,
"proName": "江苏"
}
]对应的2.json
[
{
"cityId": 1,
"cityName": "合肥",
"proId":1
},
{
"cityId": 2,
"cityName": "芜湖",
"proId":1
},
{
"cityId": 3,
"cityName": "南京",
"proId":2
},
{
"cityId": 4,
"cityName": "苏州",
"proId":2
}
]对应的3.json
[
{
"areaId": 1,
"areaName": "包河区",
"cityId": 1
},
{
"areaId": 2,
"areaName": "蜀山区",
"cityId": 1
},
{
"areaId": 3,
"areaName": "镜湖区",
"cityId": 2
},
{
"areaId": 4,
"areaName": "弋江区",
"cityId": 2
},
{
"areaId": 5,
"areaName": "玄武区",
"cityId": 3
},
{
"areaId": 6,
"areaName": "六合区",
"cityId": 3
},
{
"areaId": 7,
"areaName": "吴江区",
"cityId": 4
},
{
"areaId": 8,
"areaName": "昆山市",
"cityId": 4
}
]代码实现如上。另，实现中有个小问题，如异步获取省份时，每次拼接到的options，打印到控制台的时候，是没有包含空的“<option></option>”，但是通过加载到页面的方法：$("#pro").html(options);时，就会多拼接两个“<option></option>”，后面找不到问题，只能通过$("option:not([value])").remove();去掉空白的option。麻烦老师帮忙看看是什么问题导致会多出两个“<option></option>”，谢谢。
老师辛苦了！