jQuery实现简单三级联动效果
程序员文章站
2022-03-02 23:39:38
本文实例为大家分享了jquery实现简单三级联动的具体代码，供大家参考，具体内容如下首先写一个json数据[ { "province": "吉林省", "cities": [ { "ci...
本文实例为大家分享了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>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： ES6 知识学习总结（二）