当前位置：首页 > PHP

php 实现级联菜单

2026-01-16 11:22:42PHP

实现级联菜单的方法

级联菜单（Cascading Dropdown）通常用于根据前一个选择动态加载下一个菜单的选项。以下是使用PHP和JavaScript（Ajax）实现级联菜单的详细方法。

数据库准备

创建数据库表存储级联数据。例如，国家和城市的关联表：

CREATE TABLE countries (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100)
);

CREATE TABLE cities (
    id INT PRIMARY KEY AUTO_INCREMENT,
    country_id INT,
    name VARCHAR(100),
    FOREIGN KEY (country_id) REFERENCES countries(id)
);

前端HTML结构

创建基础的HTML表单，包含两个下拉菜单：

<select id="country" name="country">
    <option value="">选择国家</option>
    <?php
    // 从数据库获取国家列表
    $countries = $pdo->query("SELECT * FROM countries");
    foreach ($countries as $country) {
        echo "<option value='{$country['id']}'>{$country['name']}</option>";
    }
    ?>
</select>

<select id="city" name="city">
    <option value="">选择城市</option>
</select>

JavaScript Ajax请求

使用jQuery处理Ajax请求，动态加载城市数据：

$(document).ready(function() {
    $('#country').change(function() {
        var countryId = $(this).val();
        if (countryId) {
            $.ajax({
                type: 'POST',
                url: 'get_cities.php',
                data: { country_id: countryId },
                success: function(data) {
                    $('#city').html(data);
                }
            });
        } else {
            $('#city').html('<option value="">选择城市</option>');
        }
    });
});

PHP后端处理

创建get_cities.php文件处理Ajax请求：

<?php
require 'db_connection.php';

if (isset($_POST['country_id'])) {
    $countryId = $_POST['country_id'];
    $cities = $pdo->prepare("SELECT * FROM cities WHERE country_id = ?");
    $cities->execute([$countryId]);

    $options = '<option value="">选择城市</option>';
    foreach ($cities as $city) {
        $options .= "<option value='{$city['id']}'>{$city['name']}</option>";
    }
    echo $options;
}
?>

不使用jQuery的纯JavaScript实现

如果需要不使用jQuery，可以使用原生JavaScript：

document.getElementById('country').addEventListener('change', function() {
    var countryId = this.value;
    var citySelect = document.getElementById('city');

    if (countryId) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'get_cities.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (this.status == 200) {
                citySelect.innerHTML = this.responseText;
            }
        };
        xhr.send('country_id=' + countryId);
    } else {
        citySelect.innerHTML = '<option value="">选择城市</option>';
    }
});

多层级联实现

对于三级或更多级联（如国家->省->市），方法类似：

// 二级变化时触发三级菜单加载
$('#city').change(function() {
    var cityId = $(this).val();
    if (cityId) {
        $.ajax({
            type: 'POST',
            url: 'get_districts.php',
            data: { city_id: cityId },
            success: function(data) {
                $('#district').html(data);
            }
        });
    }
});