PHP 實現兩級下拉聯動：AJAX + JSON 完整範例

需求

第一個下拉選單選擇「省份」，第二個下拉動態載入該省份下的「城市」，且第二個下拉允許使用者手動輸入（可編輯）。

前端頁面 (index.php)

<select id="province" name="province">
    <option value="">請選擇省份</option>
    <?php foreach ($provinces as $p): ?>
        <option value="<?= $p['id'] ?>"><?= $p['name'] ?></option>
    <?php endforeach; ?>
</select>

<select id="city" name="city" style="width:200px">
    <option value="">請先選省份</option>
</select>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$('#province').change(function() {
    var pid = $(this).val();
    if (!pid) { $('#city').html('<option value="">請先選省份</option>'); return; }
    $.getJSON('get_cities.php', {province_id: pid}, function(data) {
        var opts = '<option value="">請選擇城市</option>';
        $.each(data, function(i, city) {
            opts += '<option value="'+city.id+'">'+city.name+'</option>';
        });
        $('#city').html(opts);
    });
});
</script>

後端介面 (get_cities.php)

<?php
header('Content-Type: application/json; charset=utf-8');
require_once 'db.php'; // PDO 連線

$pid = isset($_GET['province_id']) ? (int)$_GET['province_id'] : 0;
$stmt = $pdo->prepare('SELECT id, name FROM cities WHERE province_id = ? ORDER BY name');
$stmt->execute([$pid]);
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

支援可編輯輸入

若需第二個下拉可手動輸入，改用 <input list="cityList"> 搭配 <datalist id="cityList">，或引入 Select2、Chosen 等增強插件：

<input type="text" id="city" name="city" list="cityList" />
<datalist id="cityList"></datalist>

<script>
$.getJSON('get_cities.php', {province_id: pid}, function(data) {
    var dl = $('#cityList').empty();
    $.each(data, function(i, city) {
        dl.append('<option value="'+city.name+'" data-id="'+city.id+'">');
    });
});
</script>

進階：資料量大時的優化

• 後端加索引：CREATE INDEX idx_province ON cities(province_id);
• 前端去抖動：$('#province').change(debounce(fn, 300))。
• 快取：第一次載入後存入 sessionStorage，下次切換同省份直接讀取快取。

參考完整教學

Helló Webá - PHP+AJAX 二級聯動下拉選單完整範例