javascript實現省市多選-前端問答-PHP中文網

隨著資訊化時代的加速發展，網路已成為我們生活中不可或缺的一部分，人們在日常生活中透過電腦、手機等裝置使用互聯網，已經成為一種必要的習慣。而在網頁設計中，常常會牽涉到省市多選的功能，這就需要我們使用 JavaScript 來實現。

一、實現想法

在實現省市多選功能的過程中，我們需要用到多個下拉式選單，每個下拉式選單對應一個層級的地區，其中頂層下拉式選單為省份選擇，下拉選單中的選項為省份名稱；當使用者選擇了省份後，下面的下拉選單就會動態生成，以顯示該省份中所有的市區，市區名稱為下拉選單的選項；當用戶選中某市後，下面的下拉選單就會再次生成，以顯示該市區中的所有縣區，縣區名稱為下拉式選單的選項。

針對該功能實現的思路，我們可以採用一些 JavaScript 函式庫來提高編碼效率，如 jQuery 等函式庫。

二、實作方式

元件結構

在實作這個功能之前，我們首先需要建立一個元件結構。元件結構可能會根據實際需求而有所不同，這裡我們採用一種比較常見的方式來進行實現，如下所示：

<div>
  <select id="province">
    <option value="">请选择省份</option>
  </select>

  <select id="city">
    <option value="">请选择城市</option>
  </select>

  <select id="district">
    <option value="">请选择区域</option>
  </select>
</div>

登入後複製

該元件結構中，我們首先定義了三個下拉式選單元件，分別對應「省份」、「城市」以及「區域」。這裡我們分別為它們設定了 id 屬性，以方便後續的操作。

省份數據

在實現省份多選功能之前，我們需要先準備好省份數據，即將所有的省份名稱儲存在一個數組中，這樣在渲染省份下拉式選單時，才能夠讓使用者進行選擇。為了示範方便，這裡我們直接定義一個陣列來儲存省份資料。

var provinceArray = [
  {"name": "北京市", "value": "110000"},
  {"name": "天津市", "value": "120000"},
  {"name": "河北省", "value": "130000"},
  ……
];

登入後複製

在上述程式碼中，我們定義了一個省份數組，它包含了所有的省份以及它們的 value 值，這個 value 值是用來區分每個省份的。

渲染省份下拉式選單

有了省份資料之後，接下來我們就需要透過 JavaScript 程式碼來渲染省份下拉式選單了。我們可以透過 jQuery 等函式庫來實現這個操作。

function renderProvince() {
  var html = '<option value="">请选择省份</option>';
  for (var i = 0; i < provinceArray.length; i++) {
    html += '<option value="' + provinceArray[i].value + '">' + provinceArray[i].name + '</option>';
  }
  $('#province').html(html);
}

登入後複製

透過上述程式碼片段，我們可以將省份資料渲染到省份下拉式選單中。這裡我們採用了一個 for 迴圈來進行遍歷，然後將遍歷結果用

渲染城市下拉選單

當使用者選擇了某個省份之後，我們就需要根據目前選擇的省份，來動態產生該省份的所有城市。實作該操作同樣需要用到 jQuery 等函式庫。此操作的實現需要分為兩步：第一步是獲取當前選擇的省份；第二步是根據省份信息，動態生成城市下拉菜單。具體操作如下：

function renderCity(provinceValue) {
  var cityArray = [
    {"name": "城市1", "value": "110100"},
    {"name": "城市2", "value": "110200"},
    {"name": "城市3", "value": "110300"},
    ……
  ];

  var html = '<option value="">请选择城市</option>';
  for (var i = 0; i < cityArray.length; i++) {
    if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) {
      html += '<option value="' + cityArray[i].value + '">' + cityArray[i].name + '</option>';
    }
  }
  $('#city').html(html);
}

登入後複製

在該程式碼片段中，我們首先定義了城市數據，包含了所有的城市以及它們的 value 值。然後在遍歷城市資料的過程中，我們透過 if 語句來判斷目前遍歷項目是否屬於目前選擇的省份，如果屬於，則將它渲染到城市下拉選單中。

渲染區縣下拉式選單

取得到使用者選擇的城市之後，我們就需要根據目前選擇的城市，來動態產生該城市的所有區縣。實現該操作的程式碼如下：

function renderDistrict(cityValue) {
  var districtArray = [
    {"name": "区县1", "value": "110101"},
    {"name": "区县2", "value": "110102"},
    {"name": "区县3", "value": "110103"},
    ……
  ];

  var html = '<option value="">请选择区域</option>';
  for (var i = 0; i < districtArray.length; i++) {
    if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) {
      html += '<option value="' + districtArray[i].value + '">' + districtArray[i].name + '</option>';
    }
  }
  $('#district').html(html);
}

登入後複製

在該程式碼段中，我們首先定義了區縣數據，包含了所有的區縣以及它們的 value 值。然後在遍歷區縣資料的過程中，同樣透過 if 語句來判斷目前遍歷項目是否屬於目前選擇的城市，如果屬於，則將它渲染到區縣下拉選單中。

程式碼總結

將上述程式碼整合在一起，我們就可以實作省市區多選了，完整程式碼如下：

var provinceArray = [
  {"name": "北京市", "value": "110000"},
  {"name": "天津市", "value": "120000"},
  {"name": "河北省", "value": "130000"},
  ……
];

function renderProvince() {
  var html = '<option value="">请选择省份</option>';
  for (var i = 0; i < provinceArray.length; i++) {
    html += '<option value="' + provinceArray[i].value + '">' + provinceArray[i].name + '</option>';
  }
  $('#province').html(html);
}

function renderCity(provinceValue) {
  var cityArray = [
    {"name": "城市1", "value": "110100"},
    {"name": "城市2", "value": "110200"},
    {"name": "城市3", "value": "110300"},
    ……
  ];

  var html = '<option value="">请选择城市</option>';
  for (var i = 0; i < cityArray.length; i++) {
    if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) {
      html += '<option value="' + cityArray[i].value + '">' + cityArray[i].name + '</option>';
    }
  }
  $('#city').html(html);
}

function renderDistrict(cityValue) {
  var districtArray = [
    {"name": "区县1", "value": "110101"},
    {"name": "区县2", "value": "110102"},
    {"name": "区县3", "value": "110103"},
    ……
  ];

  var html = '<option value="">请选择区域</option>';
  for (var i = 0; i < districtArray.length; i++) {
    if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) {
      html += '<option value="' + districtArray[i].value + '">' + districtArray[i].name + '</option>';
    }
  }
  $('#district').html(html);
}

renderProvince();

$('#province').change(function () {
  var provinceValue = $(this).val();
  renderCity(provinceValue);
  renderDistrict('');
});

$('#city').change(function () {
  var cityValue = $(this).val();
  renderDistrict(cityValue);
});

登入後複製

三、實現效果

透過上述程式碼的實現，我們可以得到一個完整的省市區多重選取範例，如下圖所示：

javascript實現省市多選