jquery 地区联动

基础概念

jQuery地区联动是指使用jQuery库实现的一种动态交互功能，通常用于网页表单中，允许用户在选择一个地区（如省份）后，自动更新下一个级别的地区选项（如城市）。这种功能通过AJAX请求从服务器获取数据，并在前端动态更新下拉菜单。

类型

省份-城市联动：选择省份后，自动更新城市选项。
城市-区县联动：选择城市后，自动更新区县选项。
国家-省份联动：选择国家后，自动更新省份选项。

应用场景

注册表单
地址填写表单
物流配送地址选择

示例代码

以下是一个简单的jQuery地区联动示例：

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

    <script>
        $(document).ready(function() {
            // 模拟省份数据
            var provinces = [
                { id: 1, name: '广东省' },
                { id: 2, name: '湖南省' }
            ];

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

            // 省份选择事件
            $('#province').change(function() {
                var provinceId = $(this).val();
                if (provinceId) {
                    // 模拟城市数据
                    var cities = [
                        { id: 1, name: '广州市', provinceId: 1 },
                        { id: 2, name: '深圳市', provinceId: 1 },
                        { id: 3, name: '长沙市', provinceId: 2 },
                        { id: 4, name: '岳阳市', provinceId: 2 }
                    ];

                    // 过滤并填充城市选项
                    var filteredCities = cities.filter(function(city) {
                        return city.provinceId == provinceId;
                    });

                    $('#city').empty().append($('<option>', {
                        value: '',
                        text: '请选择城市'
                    }));

                    $.each(filteredCities, function(index, city) {
                        $('#city').append($('<option>', {
                            value: city.id,
                            text: city.name
                        }));
                    });

                    $('#city').prop('disabled', false);
                } else {
                    $('#city').empty().append($('<option>', {
                        value: '',
                        text: '请选择城市'
                    })).prop('disabled', true);
                }
            });
        });
    </script>
</body>
</html>