在網(wǎng)頁(yè)開(kāi)發(fā)中，常常需要實(shí)現(xiàn)省市縣級(jí)聯(lián)選擇功能。使用jQuery Ajax可以輕松實(shí)現(xiàn)這一功能。

首先，需準(zhǔn)備好省市縣的數(shù)據(jù)。可以使用Json格式存儲(chǔ)，例如：

[
{
"province": "浙江省",
"cities": [
{
"city": "杭州市",
"counties": [
"西湖區(qū)",
"拱墅區(qū)",
"上城區(qū)",
"下城區(qū)"
]
},
{
"city": "溫州市",
"counties": [
"鹿城區(qū)",
"龍灣區(qū)",
"甌海區(qū)",
"洞頭區(qū)"
]
}
]
},
{
"province": "江蘇省",
"cities": [
{
"city": "南京市",
"counties": [
"玄武區(qū)",
"白下區(qū)",
"鼓樓區(qū)",
"建鄴區(qū)"
]
},
{
"city": "蘇州市",
"counties": [
"姑蘇區(qū)",
"高新區(qū)",
"工業(yè)園區(qū)",
"虎丘區(qū)"
]
}
]
}
]

然后，使用jQuery Ajax請(qǐng)求該數(shù)據(jù)：

$.ajax({
type: "GET",
url: "data.json",
dataType: "json",
success: function (data) {
//省份數(shù)據(jù)處理
var provinceHtml = "";
for (var i = 0; i < data.length; i++) {
provinceHtml += "<option>" + data[i].province + "</option>"
}
$("#province").append(provinceHtml);
//城市數(shù)據(jù)處理
$("#province").change(function () {
var selectedProvince = $(this).val();
var cities = data.find(function (item) {
return item.province === selectedProvince;
}).cities;
var citiesHtml = "";
for (var i = 0; i < cities.length; i++) {
citiesHtml += "<option>" + cities[i].city + "</option>"
}
$("#city").html(citiesHtml);
//縣區(qū)數(shù)據(jù)處理
$("#city").change(function () {
var selectedCity = $(this).val();
var counties = cities.find(function (item) {
return item.city === selectedCity;
}).counties;
var countiesHtml = "";
for (var i = 0; i < counties.length; i++) {
countiesHtml += "<option>" + counties[i] + "</option>"
}
$("#county").html(countiesHtml);
});
});
}
});

最后，在HTML中添加select元素：

<select id="province"></select>
<select id="city"></select>
<select id="county"></select>

通過(guò)以上代碼和HTML，即可實(shí)現(xiàn)簡(jiǎn)單的省市縣級(jí)聯(lián)選擇。