本文实例为大家分享了jQuery实现简单三级联动的具体代码，供大家参考，具体内容如下
首先写一个JSON数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
[ { "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文件中的数据
完整代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!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> |
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/Cool_breeze_/article/details/108391452
