????：通過本課程的學(xué)習(xí)，了解了通過AJAX異步請求數(shù)據(jù)的方法，學(xué)會了無刷新頁面實現(xiàn)數(shù)據(jù)的異步加載，通過練習(xí)，對異步加載的方法進(jìn)一步加深練習(xí)，也實現(xiàn)了三級聯(lián)動和獲取三級聯(lián)動選擇內(nèi)容的功能。代碼如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl
通過本課程的學(xué)習(xí)，了解了通過AJAX異步請求數(shù)據(jù)的方法，學(xué)會了無刷新頁面實現(xiàn)數(shù)據(jù)的異步加載，通過練習(xí)，對異步加載的方法進(jìn)一步加深練習(xí)，也實現(xiàn)了三級聯(lián)動和獲取三級聯(lián)動選擇內(nèi)容的功能。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax實現(xiàn)省市級聯(lián)</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">所在地區(qū)：</label>
<select name="area" id="area"></select>
<p id="contentP"></p>
<script type="text/javascript">
var valP=""; //存放p標(biāo)簽內(nèi)容的變量
//獲取省份
$.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 //選擇了“請選擇”
{
//清空所有數(shù)據(jù)
valP="";
$('#contentP').html(valP);//清空選擇內(nèi)容
$('#city').html(valP);//清空城市
$('#area').html(valP);//清空地區(qū)
return; //不要繼續(xù)加載城市
}
$.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")
{
//如果已經(jīng)選擇過市，則做替換操作
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);//清空地區(qū)
return; //不要繼續(xù)加載地區(qū)
}
$.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")
{
//如果已經(jīng)選擇過市，則做替換操作
if(valP.indexOf("區(qū)") >= 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);//清空地區(qū)
}
});
</script>
</body>
</html>對應(yīng)的1.json
[
{
"proId": 1,
"proName": "安徽"
},
{
"proId": 2,
"proName": "江蘇"
}
]對應(yīng)的2.json
[
{
"cityId": 1,
"cityName": "合肥",
"proId":1
},
{
"cityId": 2,
"cityName": "蕪湖",
"proId":1
},
{
"cityId": 3,
"cityName": "南京",
"proId":2
},
{
"cityId": 4,
"cityName": "蘇州",
"proId":2
}
]對應(yīng)的3.json
[
{
"areaId": 1,
"areaName": "包河區(qū)",
"cityId": 1
},
{
"areaId": 2,
"areaName": "蜀山區(qū)",
"cityId": 1
},
{
"areaId": 3,
"areaName": "鏡湖區(qū)",
"cityId": 2
},
{
"areaId": 4,
"areaName": "弋江區(qū)",
"cityId": 2
},
{
"areaId": 5,
"areaName": "玄武區(qū)",
"cityId": 3
},
{
"areaId": 6,
"areaName": "六合區(qū)",
"cityId": 3
},
{
"areaId": 7,
"areaName": "吳江區(qū)",
"cityId": 4
},
{
"areaId": 8,
"areaName": "昆山市",
"cityId": 4
}
]代碼實現(xiàn)如上。另，實現(xiàn)中有個小問題，如異步獲取省份時，每次拼接到的options，打印到控制臺的時候，是沒有包含空的“<option></option>”，但是通過加載到頁面的方法：$("#pro").html(options);時，就會多拼接兩個“<option></option>”，后面找不到問題，只能通過$("option:not([value])").remove();去掉空白的option。麻煩老師幫忙看看是什么問題導(dǎo)致會多出兩個“<option></option>”，謝謝。
老師辛苦了！
?? ???：韋小寶?? ??：2018-11-10 15:02:53
???? ??：那可不多了一對option嘛，你那里拼接的時候多出來的吧！你把自己的代碼好好看看！
總的來說的寫的很不錯啦！加油吧?。?！