HTML 表單省市聯動：Select 二級聯動完整實現

靜態數據版（適合省市區固定）

<select id="province" onchange="loadCity()">
  <option value="">請選擇省份</option>
  <option value="11">北京</option>
  <option value="31">上海</option>
  <!-- 更多省份 -->
</select>
<select id="city" disabled>
  <option value="">請選擇城市</option>
</select>

<script>
const cityMap = {
  "11": [{v:"1101", n:"北京市"}],
  "31": [{v:"3101", n:"上海市"}]
  // ...
};
function loadCity() {
  const pid = document.getElementById('province').value;
  const citySel = document.getElementById('city');
  citySel.innerHTML = '<option value="">請選擇城市</option>';
  if (pid && cityMap[pid]) {
    cityMap[pid].forEach(c => citySel.add(new Option(c.n, c.v)));
    citySel.disabled = false;
  } else {
    citySel.disabled = true;
  }
}
</script>

動態 AJAX 版（數據量大/需實時更新）

async function loadCity() {
  const pid = document.getElementById('province').value;
  const citySel = document.getElementById('city');
  citySel.innerHTML = '<option>加載中...</option>';
  citySel.disabled = true;
  if (!pid) return;
  try {
    const res = await fetch(`/api/cities?provinceId=${pid}`);
    const cities = await res.json();
    citySel.innerHTML = '<option value="">請選擇城市</option>';
    cities.forEach(c => citySel.add(new Option(c.name, c.id)));
    citySel.disabled = false;
  } catch (e) {
    citySel.innerHTML = '<option>加載失敗</option>';
  }
}

現成組件推薦

• city-picker (jQuery)：$('#picker').cityPicker({province: '北京', city: '朝陽區'})，內置全國數據。
• element-ui / ant-design-vue：<el-cascader :options="options" /> 支援多級聯動、搜索、懶加載。
• 微信小程序 / uni-app：picker mode="region" 原生組件，無需維護數據。

進階：三級聯動（省-市-區）

數據結構擴展為 {provinceId: {cityId: [districts]}}，邏輯同理，第三級監聽第二級 change 事件。

核心模式：**父級 change → 獲取值 → 請求/查表子級數據 → 重新渲染子級 select → 重置/禁用更深層級**。