jquery三级联动菜单

基础概念

jQuery三级联动菜单是一种基于jQuery的动态网页交互功能，用于实现三个下拉菜单之间的联动选择。通常用于地区选择、分类选择等场景，用户在前一个下拉菜单中选择一个选项后，后一个下拉菜单的内容会根据前一个菜单的选择动态更新。

优势

简化代码：使用jQuery可以简化DOM操作和事件处理，使代码更加简洁易读。
动态交互：能够实现实时的数据更新和交互，提升用户体验。
兼容性好：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>
        <option value="1">广东省</option>
        <option value="2">湖南省</option>
    </select>
    <select id="city" disabled>
        <option value="">请选择城市</option>
    </select>
    <select id="district" disabled>
        <option value="">请选择区县</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#province').change(function() {
                var provinceId = $(this).val();
                if (provinceId) {
                    $('#city').prop('disabled', false);
                    $('#district').prop('disabled', true);
                    $('#city').html('<option value="">请选择城市</option>');
                    $('#district').html('<option value="">请选择区县</option>');

                    // 模拟AJAX请求获取城市数据
                    var cities = {
                        '1': ['广州市', '深圳市'],
                        '2': ['长沙市', '岳阳市']
                    };
                    $.each(cities[provinceId], function(index, city) {
                        $('#city').append($('<option>').val(city).text(city));
                    });
                } else {
                    $('#city').prop('disabled', true);
                    $('#district').prop('disabled', true);
                }
            });

            $('#city').change(function() {
                var city = $(this).val();
                if (city) {
                    $('#district').prop('disabled', false);
                    $('#district').html('<option value="">请选择区县</option>');

                    // 模拟AJAX请求获取区县数据
                    var districts = {
                        '广州市': ['天河区', '越秀区'],
                        '深圳市': ['南山区', '福田区'],
                        '长沙市': ['岳麓区', '芙蓉区'],
                        '岳阳市': ['岳阳楼区', '君山区']
                    };
                    $.each(districts[city], function(index, district) {
                        $('#district').append($('<option>').val(district).text(district));
                    });
                } else {
                    $('#district').prop('disabled', true);
                }
            });
        });
    </script>
</body>
</html>