JavaScript 實現省市二級聯動下拉選單：完整程式碼教學

需求：使用者在文字框輸入省份、城市後離焦，自動在下方下拉選單中選中對應項目。

核心資料結構

var datas = {
  "河北": ["衡水","保定","唐山"],
  "河南": ["鄭州","許昌","開封"]
};

完整實作程式碼

<body>
  <input id="shengfen" type="text" onblur="enters()" placeholder="輸入省份">
  <input id="chengshi" type="text" onblur="enterc()" placeholder="輸入城市">
  <select id="province"><option value="none">請選擇</option></select>
  <select id="city"></select>
  <input type="button" onclick="info()" value="輸出">
</body>

<script>
$(function() {
  // 初始化省份下拉選單
  $.each(datas, function(key) {
    $("#province").append($("<option>").val(key).text(key));
  });

  // 省份變更時更新城市選項
  $("#province").change(function() {
    var prov = $(this).val();
    $("#city").empty();
    if (prov !== "none") {
      $.each(datas[prov], function(i, city) {
        $("#city").append($("<option>").val(city).text(city));
      });
    }
  });
});

// 文字框離焦時自動選中下拉選單
function enters() {
  var val = $("#shengfen").val();
  if (datas[val]) $("#province").val(val).change();
}

function enterc() {
  var prov = $("#province").val();
  var cityVal = $("#chengshi").val();
  if (datas[prov] && $.inArray(cityVal, datas[prov]) !== -1) {
    $("#city").val(cityVal);
  }
}

function info() {
  alert("您選擇的是：" + $("#province").val() + " " + $("#city").val());
}
</script>

關鍵技巧

• 使用 $.inArray() 判斷城市是否屬於該省份
• .change() 觸發器自動聯動更新城市下拉選單
• 輸入驗證：僅當資料存在時才設定選中值

此範例展示原生 JS 與 jQuery 結合實現省市聯動與反向同步的完整邏輯。