摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三級聯動</title> <script type="text/javascript" src="jquery-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級聯動</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="">請選擇</option>';
$.each(data,function(i){ //遍歷獲得的json數據 i為索引
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>'; //進行option拼接
});
// console.log(option);
$("#pro").html(option); //界面中添加option
})
$("#pro").change(function(event){
// console.log(event.target);
$("#total").html($(this).find(":selected").text()); //顯示省級
$.getJSON('2.json',function(data){
let option = '<option value="">請選擇</option>';
$.each(data,function(i){
if(data[i].proId==$("#pro").val()){ //進行判斷 當獲取JSON數據中的proId的值等于當前選中的select的值相等時 拼接字符串
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="">請選擇</option>';
$.each(data,function(i){
if(data[i].cityId==$("#city").val()){ //進行判斷 當獲取JSON數據中的cityId的值等于當前選中的select的值相等時 拼接字符串
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); //在最后添加數據
})
})
</script>
</body>
</html>
三級聯動 ,通過獲得的JSON數據的值來與當前選中的值進行判斷,從而來拼接字符串,將字符串輸出到頁面中,下方的是通過獲取當前的表單值來輸出到頁面中p>span>span來實現的
批改老師：韋小寶批改時間：2018-11-09 09:19:07
老師總結：不錯??！城市聯動可以好好的歸納總結一下！以后還可以用的！沒事的時候記得總結一下哦！方便以后當做插件使用！