jquery省级联动

基础概念

jQuery省级联动是指使用jQuery库实现的一种前端交互功能，通常用于选择省份和城市的下拉菜单。用户在选择省份后，城市下拉菜单会自动更新为该省份对应的城市列表。这种功能可以提高用户体验，减少用户手动输入的工作量。

类型

静态数据联动：使用预先定义好的省份和城市数据，通过JavaScript实现联动效果。
动态数据联动：通过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>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangdong">广东</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>

    <script>
        $(document).ready(function() {
            var cities = {
                "beijing": ["东城区", "西城区", "朝阳区", "海淀区"],
                "shanghai": ["黄浦区", "徐汇区", "长宁区", "普陀区"],
                "guangdong": ["广州市", "深圳市", "东莞市", "佛山市"]
            };

            $('#province').change(function() {
                var province = $(this).val();
                var citySelect = $('#city');
                citySelect.empty();
                citySelect.append('<option value="">请选择城市</option>');

                if (province) {
                    $.each(cities[province], function(index, city) {
                        citySelect.append('<option value="' + city + '">' + city + '</option>');
                    });
                }
            });
        });
    </script>
</body>
</html>