PHP + JavaScript 實現省市二級聯動下拉選單（含 JSON 數據結構）

核心思路

後端 PHP 輸出兩個 JS 陣列：province（省份）與 city（城市，含所屬省份 ID），前端根據選中的省份 ID 篩選城市並動態填充第二個 <select>。

後端 PHP 輸出 JSON 格式數據

<?php
header('Content-Type: application/json; charset=utf-8');

// 假設從資料庫讀取
$provinces = [
    ['ProvinceID' => 1, 'ProvinceName' => '廣東省'],
    ['ProvinceID' => 2, 'ProvinceName' => '廣西省'],
];
$cities = [
    ['ProvinceID' => 1, 'CityID' => 10, 'CityName' => '廣州市'],
    ['ProvinceID' => 1, 'CityID' => 11, 'CityName' => '深圳市'],
    ['ProvinceID' => 2, 'CityID' => 20, 'CityName' => '南寧市'],
    ['ProvinceID' => 2, 'CityID' => 21, 'CityName' => '桂林市'],
];

echo json_encode([
    'province' => $provinces,
    'city' => $cities
]);

前端聯動邏輯 (jQuery)

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<form id="locationForm">
  <select id="province" name="province"><option value="">請選擇省份</option></select>
  <select id="city" name="city" disabled><option value="">請先選擇省份</option></select>
</form>

<script>
let provinceData = [], cityData = [];

// 1. 獲取數據
$.getJSON('api/regions.php', function(res) {
    provinceData = res.province;
    cityData = res.city;
    initProvince();
});

function initProvince() {
    const $prov = $('#province');
    $prov.empty().append('請選擇省份');
    provinceData.forEach(p => {
        $prov.append(`${p.ProvinceName}`);
    });
}

$('#province').on('change', function() {
    const pid = $(this).val();
    const $city = $('#city');
    $city.empty().append('請選擇城市').prop('disabled', !pid);
    if (!pid) return;
    cityData.filter(c => c.ProvinceID == pid).forEach(c => {
        $city.append(`${c.CityName}`);
    });
});
</script>

進階優化建議

• 數據量大時：改用 AJAX 按需加載城市，避免一次性傳輸幾萬條記錄。
• 緩存：省份極少變動，可設定長期 HTTP 緩存或 Redis 緩存 JSON。
• 無障礙：給 <select> 加上 aria-label，確保鍵盤可操作。
• TypeScript/模塊化：將邏輯封裝為 ES Module，方便 Vue/React 專案複用。