当前位置：首页 > PHP

php 实现联动菜单

2026-04-03 09:09:27PHP

实现联动菜单的方法

联动菜单通常指多个下拉菜单之间存在依赖关系，例如选择省份后，城市菜单会根据所选省份动态更新。以下是使用PHP和JavaScript实现联动菜单的步骤。

前端HTML结构

创建两个下拉菜单，一个用于选择省份，另一个用于选择城市。城市菜单的内容将根据省份的选择动态变化。

php 实现联动菜单

<select id="province" onchange="loadCities()">
    <option value="">选择省份</option>
    <option value="1">广东省</option>
    <option value="2">浙江省</option>
</select>

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

JavaScript处理联动逻辑

使用JavaScript监听省份菜单的变化，并通过AJAX请求获取对应城市数据。

function loadCities() {
    var provinceId = document.getElementById('province').value;
    if (provinceId === '') {
        document.getElementById('city').innerHTML = '<option value="">选择城市</option>';
        return;
    }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'get_cities.php?province_id=' + provinceId, true);
    xhr.onload = function() {
        if (this.status === 200) {
            document.getElementById('city').innerHTML = this.responseText;
        }
    };
    xhr.send();
}

后端PHP处理数据

创建get_cities.php文件，根据传入的省份ID返回对应的城市选项。

php 实现联动菜单

<?php
$provinceId = $_GET['province_id'];
$cities = [];

// 模拟数据，实际应用中可以从数据库获取
if ($provinceId == 1) {
    $cities = [
        ['id' => 101, 'name' => '广州'],
        ['id' => 102, 'name' => '深圳']
    ];
} elseif ($provinceId == 2) {
    $cities = [
        ['id' => 201, 'name' => '杭州'],
        ['id' => 202, 'name' => '宁波']
    ];
}

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

echo $options;
?>

数据库方案优化

实际应用中，数据通常存储在数据库中。以下是优化后的PHP代码，假设有provinces和cities两张表。

<?php
$provinceId = $_GET['province_id'];
$options = '<option value="">选择城市</option>';

if (!empty($provinceId)) {
    $conn = new mysqli('localhost', 'username', 'password', 'database');
    $stmt = $conn->prepare('SELECT id, name FROM cities WHERE province_id = ?');
    $stmt->bind_param('i', $provinceId);
    $stmt->execute();
    $result = $stmt->get_result();

    while ($row = $result->fetch_assoc()) {
        $options .= '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
    }
}

echo $options;
?>

使用jQuery简化代码

如果项目中已引入jQuery，可以使用更简洁的方式实现AJAX请求。

$('#province').change(function() {
    var provinceId = $(this).val();
    $.get('get_cities.php', { province_id: provinceId }, function(data) {
        $('#city').html(data);
    });
});