三级联动弹出层jquery特效

基础概念

三级联动弹出层是一种常见的用户界面交互设计，通常用于表单中，允许用户从多个层级的数据中进行选择。例如，在一个地区选择表单中，用户可以先选择国家，然后选择省份，最后选择城市。这种设计可以提高用户体验，减少用户输入错误。

类型

静态数据联动：使用预定义的数据进行联动。
动态数据联动：通过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="country">
        <option value="">请选择国家</option>
    </select>
    <select id="province" disabled>
        <option value="">请选择省份</option>
    </select>
    <select id="city" disabled>
        <option value="">请选择城市</option>
    </select>

    <script>
        $(document).ready(function() {
            // 模拟数据
            var countries = [
                { id: 1, name: '中国', provinces: [
                    { id: 101, name: '广东省', cities: [
                        { id: 10101, name: '广州市' },
                        { id: 10102, name: '深圳市' }
                    ]},
                    { id: 102, name: '湖南省', cities: [
                        { id: 10201, name: '长沙市' },
                        { id: 10202, name: '岳阳市' }
                    ]}
                ]},
                { id: 2, name: '美国', provinces: [
                    { id: 201, name: '加利福尼亚州', cities: [
                        { id: 20101, name: '洛杉矶' },
                        { id: 20102, name: '旧金山' }
                    ]}
                ]}
            ];

            // 加载国家
            $.each(countries, function(index, country) {
                $('#country').append($('<option>', {
                    value: country.id,
                    text: country.name
                }));
            });

            // 国家选择事件
            $('#country').change(function() {
                var countryId = $(this).val();
                if (countryId) {
                    var country = countries.find(function(c) { return c.id == countryId; });
                    $('#province').empty().append($('<option>', {
                        value: '',
                        text: '请选择省份'
                    })).prop('disabled', false);
                    $.each(country.provinces, function(index, province) {
                        $('#province').append($('<option>', {
                            value: province.id,
                            text: province.name
                        }));
                    });
                } else {
                    $('#province').empty().append($('<option>', {
                        value: '',
                        text: '请选择省份'
                    })).prop('disabled', true);
                    $('#city').empty().append($('<option>', {
                        value: '',
                        text: '请选择城市'
                    })).prop('disabled', true);
                }
            });

            // 省份选择事件
            $('#province').change(function() {
                var provinceId = $(this).val();
                if (provinceId) {
                    var country = countries.find(function(c) { return c.provinces.some(function(p) { return p.id == provinceId; }); });
                    var province = country.provinces.find(function(p) { return p.id == provinceId; });
                    $('#city').empty().append($('<option>', {
                        value: '',
                        text: '请选择城市'
                    })).prop('disabled', false);
                    $.each(province.cities, function(index, city) {
                        $('#city').append($('<option>', {
                            value: city.id,
                            text: city.name
                        }));
                    });
                } else {
                    $('#city').empty().append($('<option>', {
                        value: '',
                        text: '请选择城市'
                    })).prop('disabled', true);
                }
            });
        });
    </script>
</body>
</html>