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

最新推荐文章于 2023-02-01 11:58:35 发布

^ω^奋斗小青年

最新推荐文章于 2023-02-01 11:58:35 发布

阅读量127

点赞数 1

分类专栏： # 全面掌握Ajax 文章标签： jquery ajax json

本文链接：https://blog.csdn.net/DeathDomain/article/details/108408840

版权

全面掌握Ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

案例 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>

^ω^奋斗小青年

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动

案例 jQuery的三级联动server2.json代码展示[ { "province": "吉林省", "cities": [ { "city": "长春市", "counties": ["朝阳区", "经济开发区", "高新区"] }, { "city": "吉林市", "counties": ["东城区", "经济开发区", "老城区"] }, {
复制链接

扫一扫

专栏目录