摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三級(jí)聯(lián)動(dòng)</title> <script type="text/javascript" src="jquery-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級(jí)聯(lián)動(dòng)</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
省<select name="pro" id="pro"></select>
市<select name="city" id="city"></select>
區(qū)<select name="area" id="area"></select>
<p id="total"></p>
<script type="text/javascript">
$(function(){
$.getJSON('1.json',function(data){
// console.log(data);
let option = '<option value="">請(qǐng)選擇</option>';
$.each(data,function(i){ //遍歷獲得的json數(shù)據(jù) i為索引
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>'; //進(jìn)行option拼接
});
// console.log(option);
$("#pro").html(option); //界面中添加option
})
$("#pro").change(function(event){
// console.log(event.target);
$("#total").html($(this).find(":selected").text()); //顯示省級(jí)
$.getJSON('2.json',function(data){
let option = '<option value="">請(qǐng)選擇</option>';
$.each(data,function(i){
if(data[i].proId==$("#pro").val()){ //進(jìn)行判斷 當(dāng)獲取JSON數(shù)據(jù)中的proId的值等于當(dāng)前選中的select的值相等時(shí) 拼接字符串
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
});
$("#city").html(option);
})
})
$("#city").change(function(){
// console.log(event.target);
let span = '<span style="color:gray">'+$(this).find(":selected").text()+'</span>'; //字符串綁定
$("#total").append(span);
$.getJSON('3.json',function(data){
// console.log(data);
let option = '<option value="">請(qǐng)選擇</option>';
$.each(data,function(i){
if(data[i].cityId==$("#city").val()){ //進(jìn)行判斷 當(dāng)獲取JSON數(shù)據(jù)中的cityId的值等于當(dāng)前選中的select的值相等時(shí) 拼接字符串
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
});
$("#area").html(option);
})
})
$("#area").change(function(){
let span = '<span style="color:#ccc">'+$(this).find(":selected").text()+'</span>'; //字符串綁定
$("#total").append(span); //在最后添加數(shù)據(jù)
})
})
</script>
</body>
</html>
三級(jí)聯(lián)動(dòng) ,通過獲得的JSON數(shù)據(jù)的值來與當(dāng)前選中的值進(jìn)行判斷,從而來拼接字符串,將字符串輸出到頁面中,下方的是通過獲取當(dāng)前的表單值來輸出到頁面中p>span>span來實(shí)現(xiàn)的
批改老師：韋小寶批改時(shí)間：2018-11-09 09:19:07
老師總結(jié)：不錯(cuò)??！城市聯(lián)動(dòng)可以好好的歸納總結(jié)一下！以后還可以用的！沒事的時(shí)候記得總結(jié)一下哦！方便以后當(dāng)做插件使用！