jquery省市区三级联动 json

基础概念

jQuery省市区三级联动是指使用jQuery库实现的一个前端功能，通过选择省份、城市和地区（区县）三个层级的数据，实现联动效果。通常这种功能用于地址选择，如注册表单、物流配送等场景。

类型

静态数据：预先定义好所有省份、城市和地区的数据，存储在JSON文件中。
动态数据：通过API接口实时获取省份、城市和地区的数据。

应用场景

注册表单：用户在注册时选择地址。
物流配送：选择发货地址或收货地址。
电商网站：用户填写收货地址时选择详细地址。

示例代码

以下是一个简单的jQuery省市区三级联动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="province" name="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city" name="city">
        <option value="">请选择城市</option>
    </select>
    <select id="district" name="district">
        <option value="">请选择地区</option>
    </select>

    <script>
        // 省份数据
        var provinces = [
            { "id": "1", "name": "广东省" },
            { "id": "2", "name": "湖南省" }
        ];

        // 城市数据
        var cities = {
            "1": [
                { "id": "1-1", "name": "广州市" },
                { "id": "1-2", "name": "深圳市" }
            ],
            "2": [
                { "id": "2-1", "name": "长沙市" },
                { "id": "2-2", "name": "岳阳市" }
            ]
        };

        // 地区数据
        var districts = {
            "1-1": [
                { "id": "1-1-1", "name": "天河区" },
                { "id": "1-1-2", "name": "越秀区" }
            ],
            "1-2": [
                { "id": "1-2-1", "name": "南山区" },
                { "id": "1-2-2", "name": "福田区" }
            ],
            "2-1": [
                { "id": "2-1-1", "name": "岳麓区" },
                { "id": "2-1-2", "name": "芙蓉区" }
            ],
            "2-2": [
                { "id": "2-2-1", "name": "岳阳楼区" },
                { "id": "2-2-2", "name": "云溪区" }
            ]
        };

        // 加载省份
        $.each(provinces, function(index, province) {
            $('#province').append($('<option>', {
                value: province.id,
                text: province.name
            }));
        });

        // 省份选择事件
        $('#province').change(function() {
            var provinceId = $(this).val();
            $('#city').empty().append($('<option>', {
                value: "",
                text: "请选择城市"
            }));
            $('#district').empty().append($('<option>', {
                value: "",
                text: "请选择地区"
            }));

            if (provinceId) {
                $.each(cities[provinceId], function(index, city) {
                    $('#city').append($('<option>', {
                        value: city.id,
                        text: city.name
                    }));
                });
            }
        });

        // 城市选择事件
        $('#city').change(function() {
            var cityId = $(this).val();
            $('#district').empty().append($('<option>', {
                value: "",
                text: "请选择地区"
            }));

            if (cityId) {
                $.each(districts[cityId], function(index, district) {
                    $('#district').append($('<option>', {
                        value: district.id,
                        text: district.name
                    }));
                });
            }
        });
    </script>
</body>
</html>