jquery三级联动菜单 php

基础概念

jQuery三级联动菜单是一种使用jQuery库实现的前端交互功能，通常用于动态地从服务器获取数据并填充到下拉菜单中。这种菜单通常由三个下拉列表组成，每个列表代表一个层级的数据。当用户选择一个选项时，会根据该选项的值动态加载下一个层级的选项。

类型

静态三级联动菜单：数据预先定义在HTML中，通过JavaScript或jQuery进行控制。
动态三级联动菜单：数据从服务器动态获取，通常使用AJAX技术。

应用场景

三级联动菜单广泛应用于各种需要层级数据选择的场景，例如：

地区选择（省、市、区）
分类选择（大类、小类、子类）
时间选择（年、月、日）

示例代码

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

HTML部分

<!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>
    <select id="district" disabled>
        <option value="">请选择区县</option>
    </select>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

$(document).ready(function() {
    // 加载省份
    $.ajax({
        url: 'getProvinces.php',
        type: 'GET',
        success: function(data) {
            var provinces = JSON.parse(data);
            $.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: '请选择城市'
        })).prop('disabled', true);
        $('#district').empty().append($('<option>', {
            value: '',
            text: '请选择区县'
        })).prop('disabled', true);

        if (provinceId) {
            $.ajax({
                url: 'getCities.php',
                type: 'GET',
                data: { provinceId: provinceId },
                success: function(data) {
                    var cities = JSON.parse(data);
                    $.each(cities, function(index, city) {
                        $('#city').append($('<option>', {
                            value: city.id,
                            text: city.name
                        }));
                    });
                    $('#city').prop('disabled', false);
                }
            });
        }
    });

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

        if (cityId) {
            $.ajax({
                url: 'getDistricts.php',
                type: 'GET',
                data: { cityId: cityId },
                success: function(data) {
                    var districts = JSON.parse(data);
                    $.基础上，$.each(districts, function(index, district) {
                        $('#district').append($('<option>', {
                            value: district.id,
                            text: district.name
                        }));
                    });
                    $('#district').prop('disabled', false);
                }
            });
        }
    });
});

PHP部分（getProvinces.php）

<?php
// 假设这是从数据库获取省份数据的代码
$provinces = [
    ['id' => 1, 'name' => '广东省'],
    ['id' => 2, 'name' => '湖南省'],
    // 其他省份
];

header('Content-Type: application/json');
echo json_encode($provinces);
?>