[Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动-小白筆記-匯編語言學習筆記

[Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动

2023-09-10 阅读 18 评论 0

摘要：案例 jQuery的三级联动 server2.json代码展示 [{"province": "吉林省","cities": [{"city": "长春市","counties": ["朝阳区", "经济开发区", "高新区"]},{"city": "吉林市","c

案例 jQuery的三级联动

server2.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": ["二道区", "河东区", "高新区"]}]}
]

HTML代码展示

<!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/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/server2.json", function (data) {// 把data保存到json全局变量中json = data;// 遍历data数据$.each(data, function (index, obj) {// 获取所有的省份信息var provinceName = obj.province;// 将省份信息添加到对应的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();$.each(json, function (index, obj) {var provinceName = obj.province;if (provinceElementName === provinceName) {// 获取到城市数组集合var cities = obj.cities;// 遍历城市数组集合$.each(cities, function (index, obj) {// 获取到城市名称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();$.each(json, function (index, obj) {// 获取该省对应的所有的城市信息var cities = obj.cities;$.each(cities, function (index, cityObj) {var cityName = cityObj.city;if (cityElementName === cityName) {// 获取到区级数组集合var counties = cityObj.counties;// 遍历区级数组集合$.each(counties, function (index, value) {// 获取到区级名称// 将该城市对应的区级名称添加到对应的select元素中$county.append(`<option value="${value}">${value}</option>`);});}});});});});
</script>
</body>
</html>

原文链接：https://hbdhgg.com/1/39630.html

发表评论: