当前位置：首页 > PHP

ajax php实现三级联动菜单

2026-02-27 21:21:34PHP

实现三级联动菜单的步骤

HTML部分
创建一个包含三个下拉菜单的表单，初始状态下后两级菜单禁用或隐藏：

<select id="province" onchange="loadCity()">
    <option value="">选择省份</option>
</select>

<select id="city" disabled onchange="loadDistrict()">
    <option value="">选择城市</option>
</select>

<select id="district" disabled>
    <option value="">选择区县</option>
</select>

JavaScript部分
使用AJAX动态加载数据，依赖jQuery库简化代码：

// 加载省份数据
function loadProvince() {
    $.ajax({
        url: 'get_data.php',
        type: 'POST',
        data: {type: 'province'},
        success: function(data) {
            $('#province').html(data);
        }
    });
}

// 根据省份加载城市
function loadCity() {
    var provinceId = $('#province').val();
    if(provinceId) {
        $.ajax({
            url: 'get_data.php',
            type: 'POST',
            data: {type: 'city', parent: provinceId},
            success: function(data) {
                $('#city').html(data).prop('disabled', false);
                $('#district').html('<option value="">选择区县</option>').prop('disabled', true);
            }
        });
    }
}

// 根据城市加载区县
function loadDistrict() {
    var cityId = $('#city').val();
    if(cityId) {
        $.ajax({
            url: 'get_data.php',
            type: 'POST',
            data: {type: 'district', parent: cityId},
            success: function(data) {
                $('#district').html(data).prop('disabled', false);
            }
        });
    }
}

// 页面加载时初始化省份
$(document).ready(function() {
    loadProvince();
});

PHP后端处理
创建get_data.php处理AJAX请求，假设数据存储在数据库中：

<?php
$db = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
$type = $_POST['type'] ?? '';

switch($type) {
    case 'province':
        $stmt = $db->query("SELECT id, name FROM provinces");
        echo '<option value="">选择省份</option>';
        while($row = $stmt->fetch()) {
            echo "<option value='{$row['id']}'>{$row['name']}</option>";
        }
        break;

    case 'city':
        $parent = $_POST['parent'];
        $stmt = $db->prepare("SELECT id, name FROM cities WHERE province_id = ?");
        $stmt->execute([$parent]);
        echo '<option value="">选择城市</option>';
        while($row = $stmt->fetch()) {
            echo "<option value='{$row['id']}'>{$row['name']}</option>";
        }
        break;

    case 'district':
        $parent = $_POST['parent'];
        $stmt = $db->prepare("SELECT id, name FROM districts WHERE city_id = ?");
        $stmt->execute([$parent]);
        echo '<option value="">选择区县</option>';
        while($row = $stmt->fetch()) {
            echo "<option value='{$row['id']}'>{$row['name']}</option>";
        }
        break;
}
?>

数据库结构建议

创建三个关联表存储层级数据：

ajax php实现三级联动菜单

CREATE TABLE provinces (
    id INT PRIMARY KEY,
    name VARCHAR(50)
);

CREATE TABLE cities (
    id INT PRIMARY KEY,
    province_id INT,
    name VARCHAR(50),
    FOREIGN KEY (province_id) REFERENCES provinces(id)
);

CREATE TABLE districts (
    id INT PRIMARY KEY,
    city_id INT,
    name VARCHAR(50),
    FOREIGN KEY (city_id) REFERENCES cities(id)
);