JavaScript省市級聯效果詳解

admin發表於2018-12-31
JavaScript

本章節分享一段程式碼例項，它實現了省市級聯效果，這種效果在大量的網站中都有使用。

下面詳細介紹一下它的實現過程，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">
var provs={ 
  "江西省":["南昌市", "景德鎮", "九江", "鷹潭", "萍鄉", "新餘", "贛州", "吉安", "宜春", "撫州", "上饒"],
  "福建省":["福州", "廈門", "莆田", "三明", "泉州", "漳州", "南平", "龍巖", "寧德"],
  "河北省":["石家莊", "邯鄲", "邢臺", "保定", "張家口", "承德", "廊坊", "唐山", "秦皇島", "滄州", "衡水"]
};
function loadProv() {
  var prov = document.getElementById("prov");
  for (var key in provs) {
    var provName = key;
    var optProv = document.createElement("option");
    optProv.value = provName;
    optProv.innerText = provName;
    prov.appendChild(optProv);
  }
}
function provChange() {
  var prov = document.getElementById("prov");
  var city = document.getElementById("city");
  var provName = prov.value;
 
  if (provName == "none") {
    city.style.display = "none";
    return;
  }
  else {
    city.style.display = "";
  }
  var citys = provs[provName];
 
  for (var index = city.childNodes.length - 1; index >= 0; index--) {
    var child = city.childNodes[index];
    city.removeChild(child);
  }
   
  for (var index = 0; index < citys.length; index++) {
    var optCity = document.createElement("option");
    optCity.value = citys[index];
    optCity.innerText = citys[index];
    city.appendChild(optCity);
  }
}
window.onload=function(){
  loadProv();
  var prov = document.getElementById("prov");
  prov.onchange=function(){provChange()}
}
</script>
</head>
<body>
<select id="prov">
  <option value="none">請選擇省</option>
</select>
<select id="city" style="display:none"></select>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var provs={}，儲存省市的json結構資料。

（2）.function loadProv() {}，此函式實現了初始化頁面載入資料的功能。

（3）.var prov = document.getElementById("prov")，獲取存放省份的select下拉選單。

（4）.for (var key in provs)，遍歷json結構資料。

（5）.var provName = key，獲取省份的名稱。

（6）.var optProv = document.createElement("option")，建立一個option元素物件。

（7）.optProv.value = provName，設定option元素的value屬性值。

（8）.optProv.innerText = provName，設定option顯示的文字內容。

（9）.prov.appendChild(optProv)，將option元素新增到select下拉選單。

（10）.function provChange() {}，作為onchange事件處理函式。

（11）.var prov = document.getElementById("prov"),獲取省份下拉選單。

（12）.var city = document.getElementById("city"),獲取城市下拉選單。

（13）.var provName = prov.value，獲取當前選中的省份的value值。

（14）.if (provName == "none") {

  city.style.display = "none";

  return;

}，如果值等於none，說明選中的是第一項，那麼城市下拉選單還是具有隱藏狀態，並跳出函式。

（15）.else {

  city.style.display = "";

},否則的話顯示出城市下拉選單，預設狀態它是隱藏的。

（16）.var citys = provs[provName]，獲取城市，citys是個陣列。

（17）.for (var index = city.childNodes.length - 1; index >= 0; index--) {

  var child = city.childNodes[index];

  city.removeChild(child);

}，遍歷城市下拉選單下的option元素，然後刪除這些元素。

之所以清空就是為了防止當再次載入的時候出現累加情況。

（18）.for (var index = 0; index < citys.length; index++) {}，遍歷陣列中的元素，也就是城市。

（19）.var optCity = document.createElement("option")，建立option元素。

（20）.optCity.value = citys[index]，設定option元素的value值。

（21）.optCity.innerText = citys[index]，設定option元素的文字內容。

（22）.city.appendChild(optCity)，將option元素新增select下拉選單。

二.相關閱讀:

（1）.for in語句可以參閱JavaScript for in一章節。

（2）.document.createElement()可以參閱document.createElement()一章節。

（3）.appendChild()可以參閱JavaScript appendChild()一章節。

（4）.childNodes可以參閱JavaScript childNodes一章節。

（5）.removeChild()可以參閱JavaScript removeChild()一章節。

（6）.onchange事件可以參閱JavaScript change事件一章節。

相關文章