基于ajax实现级联下拉菜单(至少3级)

实现级联下拉菜单的主要思路是通过ajax异步请求获取对应的数据，并根据选择的上一级菜单的值来动态生成下一级菜单的选项。以下是一个实现三级级联下拉菜单的示例代码：

HTML代码：

<select name="province" id="province">
    <option value="">请选择省份</option>
</select>
<select name="city" id="city">
    <option value="">请选择城市</option>
</select>
<select name="area" id="area">
    <option value="">请选择区县</option>
</select>

JavaScript代码：

$(function() {
    // 当省份下拉框改变时，触发获取城市信息的ajax请求
    $('#province').change(function() {
        var provinceId = $(this).val();
        if (provinceId) {
            $.ajax({
                type: 'POST',
                url: 'getCity.php',
                data: {provinceId: provinceId},
                dataType: 'json',
                success: function(data) {
                    var options = '<option value="">请选择城市</option>';
                    $.each(data, function(key, value) {
                        options += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    $('#city').html(options);
                    $('#area').html('<option value="">请选择区县</option>');
                }
            });
        } else {
            $('#city').html('<option value="">请选择城市</option>');
            $('#area').html('<option value="">请选择区县</option>');
        }
    });

    // 当城市下拉框改变时，触发获取区县信息的ajax请求
    $('#city').change(function() {
        var cityId = $(this).val();
        if (cityId) {
            $.ajax({
                type: 'POST',
                url: 'getArea.php',
                data: {cityId: cityId},
                dataType: 'json',
                success: function(data) {
                    var options = '<option value="">请选择区县</option>';
                    $.each(data, function(key, value) {
                        options += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    $('#area').html(options);
                }
            });
        } else {
            $('#area').html('<option value="">请选择区县</option>');
        }
    });
});

PHP代码（getCity.php）：

<?php
// 假设省份和城市数据存储在数据库中
$provinceId = $_POST['provinceId'];
$pdo = new PDO('mysql:host=localhost;dbname=test', 'root', 'password');
$sql = "SELECT * FROM city WHERE province_id = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$provinceId]);
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);

PHP代码（getArea.php）：

<?php
// 假设城市和区县数据存储在数据库中
$cityId = $_POST['cityId'];
$pdo = new PDO('mysql:host=localhost;dbname=test', 'root', 'password');
$sql = "SELECT * FROM area WHERE city_id = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$cityId]);
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);

以上代码中，当省份下拉框改变时，发送ajax请求获取对应的城市信息，并动态生成城市下拉框的选项；当城市下拉框改变时，发送ajax请求获取对应的区县信息，并动态生成区县下拉框的选项。通过这种方式，就可以实现级联下拉菜单的功能。