abstrak：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
?。?lt;select name=''id="pro"></select>
市：<select name="" id="city"></select>
區(qū)：<select name="" id="area"></select>
<p></p>
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function () {
$.getJSON('省.json',function (data) {
// console.log(data);
var option = '<option>選擇(省)</option>';
$.each(data,function (i) {
// console.log(data[i]);
option = option+'<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
})
// console.log(option);
$(option).appendTo("#pro");
})
$('#pro').change(function () {
var s = $(this).find(':selected').text();
$('p').html(s);
$.getJSON('市.json',function (data) {
// console.log(data)
var option = '<option>選擇（市）</option>';
$.each(data,function (i) {
// console.log(data[i]);
if (data[i].proId == $('#pro').val()){
option = option+'<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
})
$('#city').html(option);
})
})
$('#city').change(function () {
var s = $(this).find(':selected').text();
var p = $('p').text();
$('p').html(p+s);
$.getJSON('區(qū).json',function (data) {
// console.log(data)
var option = '<option>選擇（區(qū)）</option>';
$.each(data,function (i) {
// console.log(data[i]);
if (data[i].cityId == $('#city').val()){
option = option+'<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
})
$('#area').html(option);
})
})
$('#area').change(function () {
var s = $(this).find(':selected').text();
var p = $('p').text();
$('p').html(p+s);
})
})
</script>
</html>
[
{
"proId":1,
"proName":"安徽"
},
{
"proId":2,
"proName":"江蘇"
}
]
[
{
"cityId":1,
"cityName":"合肥",
"proId":1
},
{
"cityId":2,
"cityName":"蕪湖",
"proId":1
},
{
"cityId":1,
"cityName":"南京",
"proId":2
},
{
"cityId":2,
"cityName":"蘇州",
"proId":2
}
]
[
{
"areaId":1,
"areaName":"包河區(qū)",
"cityId":1
},
{
"areaId":2,
"areaName":"蜀山區(qū)",
"cityId":1
},
{
"areaId":1,
"areaName":"玄武區(qū)",
"cityId":2
},
{
"areaId":2,
"areaName":"昆山區(qū)",
"cityId":2
}
]
第一先獲取json文件的數(shù)據(jù)，并添加到選擇框中
1.通過$.getjson()方法獲取到j(luò)son文件里的數(shù)據(jù)，$.each()方法遍歷獲取到的對象
2.可以使用對象的屬性方法data[i].proId獲取到對象的值和名稱
3.創(chuàng)建一個變量option存儲值和名稱，拼接成選擇框的格式<option></option>
4.將option添加到select框中
第二步選擇框的change事件，通過獲取選擇框選中的值和第二級獲取數(shù)據(jù)的proId比較
1.如果選擇框選中的值和遍歷獲取到的對象的proId一致，變量option存儲拼接值
2.將option添加到select框中
第三步 數(shù)據(jù)雙向綁定
1.$(this).find(':selected').text() 獲取當(dāng)前選中的文本內(nèi)容
2.將它添加到p標(biāo)簽中
3.獲取到p標(biāo)簽的內(nèi)容
3.將p標(biāo)簽的內(nèi)容和當(dāng)前選中的文本內(nèi)容進行拼接 添加到p標(biāo)簽中
Guru membetulkan：韋小寶Masa pembetulan：2019-01-22 13:12:29
Rumusan guru：掌握了三級聯(lián)動的原理，以后寫四級城市聯(lián)動也是輕而易舉的事情 繼續(xù)加油吧