当前位置：首页 > PHP

ajax php实现三级联动菜单

2026-04-03 06:04:54PHP

实现三级联动菜单（AJAX + PHP）

数据库准备
创建包含三级数据的表结构（例如省、市、区）：

CREATE TABLE `province` (`id` INT PRIMARY KEY, `name` VARCHAR(50));  
CREATE TABLE `city` (`id` INT PRIMARY KEY, `pid` INT, `name` VARCHAR(50));  
CREATE TABLE `district` (`id` INT PRIMARY KEY, `cid` INT, `name` VARCHAR(50));

前端HTML结构

<select id="province"></select>  
<select id="city"></select>  
<select id="district"></select>

JavaScript（jQuery AJAX）

$(document).ready(function(){
    // 加载省份数据
    $.get("get_data.php?level=province", function(data){
        $("#province").html(data);
    });

    // 省份变化时加载城市
    $("#province").change(function(){
        var pid = $(this).val();
        $.get("get_data.php?level=city&pid="+pid, function(data){
            $("#city").html(data);
            $("#district").html('<option value="">选择区县</option>');
        });
    });

    // 城市变化时加载区县
    $("#city").change(function(){
        var cid = $(this).val();
        $.get("get_data.php?level=district&cid="+cid, function(data){
            $("#district").html(data);
        });
    });
});

PHP后端处理（get_data.php）

ajax php实现三级联动菜单

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

if($level == 'province'){
    $stmt = $db->query("SELECT * FROM province");
    echo '<option value="">选择省份</option>';
    while($row = $stmt->fetch()){
        echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';
    }
}
else if($level == 'city' && isset($_GET['pid'])){
    $stmt = $db->prepare("SELECT * FROM city WHERE pid = ?");
    $stmt->execute([$_GET['pid']]);
    echo '<option value="">选择城市</option>';
    while($row = $stmt->fetch()){
        echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';
    }
}
else if($level == 'district' && isset($_GET['cid'])){
    $stmt = $db->prepare("SELECT * FROM district WHERE cid = ?");
    $stmt->execute([$_GET['cid']]);
    echo '<option value="">选择区县</option>';
    while($row = $stmt->fetch()){
        echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';
    }
}
?>