PHP + AJAX 實現三級聯動下拉選單：省市區/分類層級、資料庫設計、前後端完整代碼

PHP + AJAX 實現三級聯動下拉選單：省市區/分類層級、資料庫設計、前後端完整代碼

三級聯動 (如省市區、商品分類) 是表單常見需求。本文提供資料庫設計、後端 API (get2.php)、前端頁面 (index.php + aa.js) 完整可運作代碼，採用原生 XMLHttpRequest (相容舊瀏覽器)，並說明現代 Fetch/axios 重構方向。

1. 資料庫設計 (單表無限級分類)

CREATE TABLE `area` (
    `id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `name` VARCHAR(50) NOT NULL COMMENT '名稱',
    `parent_id` INT UNSIGNED NOT NULL DEFAULT 0 COMMENT '父級 ID，0 為頂級',
    `level` TINYINT UNSIGNED NOT NULL DEFAULT 1 COMMENT '層級 1/2/3',
    `sort` INT UNSIGNED NOT NULL DEFAULT 0 COMMENT '排序',
    INDEX `idx_parent` (`parent_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 示例資料
INSERT INTO `area` (`id`,`name`,`parent_id`,`level`) VALUES
(1, '台灣', 0, 1),
(2, '台北市', 1, 2), (3, '新北市', 1, 2), (4, '桃園市', 1, 2),
(5, '中正區', 2, 3), (6, '大同區', 2, 3), (7, '板橋區', 3, 3), (8, '中壢區', 4, 3);

2. 後端 API (api/area.php)

prepare("SELECT id, name FROM area WHERE parent_id = ? ORDER BY sort, id");
$stmt->execute([$parentId]);
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode(['code' => 0, 'data' => $rows]);

3. 前端頁面 (index.php)

地區選擇
請選擇省/直轄市
請選擇市/區
請選擇鄉鎮市區




取得選值

4. 原生 XMLHttpRequest 版 (相容 IE6+，參考原文 aa.js)

// js/cascade-legacy.js
function createXHR() {
    if (window.XMLHttpRequest) return new XMLHttpRequest();
    try { return new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) {}
    try { return new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) {}
    return null;
}

function loadLevelLegacy(level, parentId) {
    const xhr = createXHR();
    if (!xhr) return alert('瀏覽器不支援 AJAX');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
            const res = JSON.parse(xhr.responseText);
            const sel = document.getElementById('level' + level);
            sel.innerHTML = '請選擇';
            res.data.forEach(item => {
                const opt = document.createElement('option');
                opt.value = item.id; opt.textContent = item.name;
                sel.appendChild(opt);
            });
            sel.disabled = false;
        }
    };
    xhr.open('GET', 'api/area.php?parent_id=' + parentId, true);
    xhr.send(null);
}

現代化重構建議

常見問題

• 中文亂碼： 資料表/連線/頁面/HTTP Header 全鏈路 UTF-8 (utf8mb4)。
• 第二級不顯示： 檢查 parent_id 傳遞正確、資料表有對應子資料、JS 選取器 ID 正確。
• 重複請求： change 事件觸發多次，加防抖或檢查值是否真正改變。
• 跨域： 開發環境前後端分離需配置 CORS Header (Access-Control-Allow-Origin)。