溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了jQuery實現簡單三級聯動的具體代碼，供大家參考，具體內容如下
首先寫一個JSON數據
[
{
"province": "吉林省",
"cities": [
{
"city": "長春市",
"counties": ["朝陽區", "經濟開發區", "高新區"]
},
{
"city": "吉林市",
"counties": ["東城區", "經濟開發區", "老城區"]
},
{
"city": "白山市",
"counties": ["二道區", "河東區", "高新區"]
}
]
},
{
"province": "遼寧省",
"cities": [
{
"city": "沈陽市",
"counties": ["朝陽區", "經濟開發區", "高新區"]
},
{
"city": "大連市",
"counties": ["東城區", "經濟開發區", "老城區"]
},
{
"city": "鐵嶺市",
"counties": ["二道區", "河東區", "高新區"]
}
]
},
{
"province": "山東省",
"cities": [
{
"city": "青島市",
"counties": ["朝陽區", "經濟開發區", "高新區"]
},
{
"city": "濟南市",
"counties": ["東城區", "經濟開發區", "老城區"]
},
{
"city": "威海市",
"counties": ["二道區", "河東區", "高新區"]
}
]
}
]
然后用Ajax動態獲取JSON文件中的數據
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三級聯動</title>
</head>
<body>
<!-- 三級聯動 - 兩個二級聯動 -->
<select id="province">
<option value="">---</option>
</select>
<select id="city">
<option value="">---</option>
</select>
<select id="county">
<option value="">---</option>
</select>
<script src="js/jquery-1.12.4.js"></script>
<script src="../js/createXMLHttpRequest.js"></script>
<script>
var $province = $("#province");
var $city = $("#city");
var $county = $("#county");
var json;
$.getJSON("data/server1.json", function (data) {
// 把data保存到json全局變量中
json = data;
// 遍歷data數據
$.each(data, function (index, obj) {
// 獲取所有的省份信息
var provinceName = obj.province;
// console.log(provinceName);
// 將省份信息添加到對應的select元素中
$province.append(
`<option value="${provinceName}">${provinceName}</option>`
);
});
$province.change(function () {
// 將城市下拉列表的選項清空
$city.empty();
$city.append(`<option value="">---</option>`);
// 獲取到所選擇的城市的文本信息
var provinceElementName = $(this).children("option:selected").text();
// console.log(provinceElementName);
$.each(json, function (index, obj) {
var provinceName = obj.province;
// console.log(provinceName);
if (provinceElementName === provinceName) {
// 獲取到城市數組集合
var cities = obj.cities;
// 遍歷城市數組集合
$.each(cities, function (index, obj) {
// console.log(obj.city);
// 獲取到城市名稱
var cityName = obj.city;
// 將該省對應的城市名稱添加到對應的select中
$city.append(
`<option value="${cityName}">${cityName}</option>`
);
});
}
});
});
$city.change(function () {
// 將區級下拉列表的選項清空
$county.empty();
$county.append(`<option value="">---</option>`);
// 獲取到所選擇的城市的文本信息
var cityElementName = $(this).children("option:selected").text();
// console.log(cityElementName);
$.each(json, function (index, obj) {
// 獲取該省對應的所有的城市信息
var cities = obj.cities;
// console.log(cities);
$.each(cities, function (index, cityObj) {
// console.log(cityObj.city);
var cityName = cityObj.city;
if (cityElementName === cityName) {
// 獲取到區級數組集合
// console.log(cityObj.counties);
var counties = cityObj.counties;
// 遍歷區級數組集合
$.each(counties, function (index, value) {
// 獲取到區級名稱
// console.log(value);
// 將該城市對應的區級名稱添加到對應的select元素中
$county.append(`<option value="${value}">${value}</option>`);
});
}
});
});
});
});
</script>
</body>
</html>
效果如下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
