php 实现联动菜单
实现联动菜单的方法
联动菜单通常指二级或多级下拉菜单，其中后一级菜单的内容根据前一级菜单的选择动态变化。以下是使用 PHP 和 JavaScript（AJAX）实现联动菜单的步骤。
数据库准备
创建数据库表存储联动数据，例如省市区三级联动：
CREATE TABLE `provinces` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `cities` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`province_id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
);前端 HTML 结构
创建两个下拉菜单，第二个菜单的内容通过 AJAX 动态加载：
<select id="province" onchange="loadCities()">
<option value="">选择省份</option>
<?php
$provinces = $db->query("SELECT * FROM provinces");
foreach ($provinces as $province) {
echo "<option value='{$province['id']}'>{$province['name']}</option>";
}
?>
</select>
<select id="city">
<option value="">选择城市</option>
</select>JavaScript AJAX 函数
使用 JavaScript 发送 AJAX 请求获取二级菜单数据：
function loadCities() {
var provinceId = document.getElementById('province').value;
if (provinceId === '') 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 文件处理 AJAX 请求：
$provinceId = $_GET['province_id'] ?? 0;
$cities = $db->query("SELECT * FROM cities WHERE province_id = " . (int)$provinceId);
echo '<option value="">选择城市</option>';
foreach ($cities as $city) {
echo "<option value='{$city['id']}'>{$city['name']}</option>";
}使用 jQuery 简化
如果项目中已引入 jQuery，可以简化 AJAX 部分：
$('#province').change(function() {
$.get('get_cities.php', {province_id: $(this).val()}, function(data) {
$('#city').html(data);
});
});完整实现注意事项
- 数据库连接需在 PHP 文件中正确配置
- 对用户输入进行安全过滤防止 SQL 注入
- 添加错误处理机制
- 考虑添加加载状态提示
这种方法可以扩展到多级联动菜单，每级菜单都通过前一级的选择触发 AJAX 请求获取数据。
