javascript讀取以json形式儲存的省市級聯效果

admin發表於2017-02-02
JavaScriptJSON
本章節分享一段程式碼例項，它實現了從json資料格式中讀取資料，然後顯示出來。

這裡是具有級聯效果的省市功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a{ 
  color:#000; 
  text-decoration:none; 
}
a:hover{ 
  color:#F00; 
}
#menu{ 
  width:100px; 
  border:1px solid #CCC; 
  border-bottom:none;
}
#menu ul{ 
  list-style:none; 
  margin:0px; 
  padding:0px; 
}
#menu ul li{ 
  background:#eee; 
  padding:0px 8px; 
  height:26px; 
  line-height:26px; 
  border-bottom:1px solid #CCC; 
  position:relative; 
}
#menu ul li ul{ 
  display:none; 
  position:absolute; 
  left:100px; 
  top:0px; 
  width:100px;
  border:1px solid #ccc; 
  border-bottom:none; 
}
#menu ul li.current ul{ 
  display:block;
} 
#menu ul li ul li{
  text-align:center;
}
</style>
<script type="text/javascript">
var provs = { 
  "江西省": ["南昌市", "景德鎮", "九江", "鷹潭", "萍鄉", "新餘", "贛州", "吉安", "宜春", "撫州", "上饒"],
  "福建省": ["福州", "廈門", "莆田", "三明", "泉州", "漳州", "南平", "龍巖", "寧德"],
  "河北省": ["石家莊", "邯鄲", "邢臺", "保定", "張家口", "承德", "廊坊", "唐山", "秦皇島", "滄州", "衡水"],
  "四川省": ["成都市", "自貢市", "攀枝花市", "瀘州市", "德陽市", "綿陽市", "廣元市", "遂寧市"],
  "山西省": ["太原市", "大同市", "陽泉市", "長治市", "晉城市", "朔州市", "晉中市", "運城市"],
  "內蒙古": ["呼和浩特市", "包頭市", "烏海市", "赤峰市", "通遼市", "鄂爾多斯市", "呼倫貝爾市"],
  "海南省": ["海口市", "三亞市"], "重慶市": ["重慶"], 
  "貴州省": ["貴陽市", "六盤水市", "遵義市", "安順市", "銅仁地區", "黔西南布依族苗族自治州"],
  "甘肅省": ["蘭州市", "嘉峪關市", "金昌市", "白銀市", "天水市", "武威市", "張掖市", "平涼市"],
  "青海省": ["西寧市", "海東地區", "海北藏族自治州", "黃南藏族自治州", "海南藏族自治州"],
  "寧夏自治區": ["銀川市", "石嘴山市", "吳忠市", "固原市", "中衛市"]
};
function iniEvent(){
  var provUL=document.getElementById("prov");
  if(provUL){
    var allli=provUL.getElementsByTagName("li");
    for(index=0;index<allli.length;index++) {
      node=allli[index];
      node.onmouseover=function(){
        this.className="current";
      }
      node.onmouseout=function(){
        this.className=this.className.replace("current","");
      }
    }
  }
}
function loadData(){      
  var provUL=document.getElementById("prov");
  var nIndex=0;
  for (var key in provs){
    var provLi = document.createElement("li");
    provLi.id = "provLI" + nIndex;
    provLi.innerHTML = "<a href='#'>" + key + "</a>";
    provUL.appendChild(provLi);
 
    var citys = provs[key];
    if (citys.length > 0) {
      var cityUL = document.createElement("ul");
      var maxLength = 0;
      for (var index = 0; index < citys.length; index++) {
        var cityName = citys[index];
        if (cityName.length > maxLength) {
          maxLength = cityName.length;
        }
        var cityLI = document.createElement("li");
        cityLI.id = "cityLI" + index;
        cityLI.innerHTML = "<a href='#'>" + cityName + "</a>";
        cityUL.appendChild(cityLI);
      }
      if (maxLength <= 6) {
        maxLength = 100;
      }
      else {
        maxLength = maxLength * 20;
      }
      maxLength = maxLength + "px"; 
      cityUL.style.width= maxLength; 
      provLi.appendChild(cityUL);
    }
    nIndex++;
  }
  iniEvent();
}
window.onload=function(){
  loadData();
}
</script>
</head>
<body>
<div id="menu">
  <ul id="prov"></ul>
</div>  
</body>
</html>

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

一.程式碼註釋:

（1）.var provs = { }，存有省市的json結構資料（一個物件直接量）。

（2）.function iniEvent(){}，此方法實現了事件處理函式的註冊功能。

（3）.var provUL=document.getElementById("prov")，獲取id屬性值為prov的ul元素的物件。

（4）.if(provUL)，判斷元素是否存在。

（5）.var allli=provUL.getElementsByTagName("li")，獲取下面的li元素物件集合。

（6）.for(index=0;index<allli.length;index++) {}，遍歷每一個li元素物件。

（7）.node=allli[index]，獲取指定索引的li元素物件。

（8）.node.onmouseover=function(){

  this.className="current";

}，為li元素註冊onmouseover事件處理函式。

也就是滑鼠懸浮的時候為當前元素新增class樣式值current。由於css程式碼如下:

#menu ul li.current ul{ 

  display:block;

} ,所以是給第一級的li元素新增樣式類，使下面的ul元素顯示，也就是讓城市顯示。

（9）.node.onmouseout=function(){

  this.className=this.className.replace("current","");

}，刪除新增的樣式類值。

（10）.function loadData(){ }，此函式實現了讀取省市並且放置於ul li中。

（11）.var provUL=document.getElementById("prov")，獲取id屬性值為prov的元素，也就是這裡的ul元素。

（12）.var nIndex=0，宣告一個變數並賦值為0，用來作為id的一部分，它是變化的。

（13）.for (var key in provs){}，遍歷json格式物件。

（14）.var provLi = document.createElement("li")，建立一個li元素物件，用來防止省份。

（15）.provLi.id = "provLI" + nIndex，為當前li元素新增id屬性並賦值。

（16）.provLi.innerHTML = "<a href='#'>" + key + "</a>"，設定li元素的內容，其實就是省份。

（17）.provUL.appendChild(provLi)，將li元素新增到ul中。

（18）.var citys = provs[key]，獲取城市，citys是一個陣列。

（19）.if (citys.length > 0) {}，如果陣列長度大於0，那麼說明存在城市。

（20）.var cityUL = document.createElement("ul")，建立ul元素，用來防止城市。

（21）.var maxLength = 0，宣告一個變數並賦值為0，它是用來儲存ul元素的寬度的。

（22）.for (var index = 0; index < citys.length; index++) {},遍歷陣列中的每一個元素。（23）.var cityName = citys[index]，獲取城市名稱。

（24）.if (cityName.length > maxLength) {  maxLength = cityName.length;

}，如果城市名稱的長度大於maxLength，那麼就將maxLength值設定為城市名稱的長度。

（25）.var cityLI = document.createElement("li")，建立li元素物件。

（26）.cityLI.id = "cityLI" + index，設定元素的id屬性值。

（27）.cityLI.innerHTML = "<a href='#'>" + cityName + "</a>"，將城市放置於li元素中。

（28）.cityUL.appendChild(cityLI)，將li元素放置於ul中。

（29）.if (maxLength <= 6) {

  maxLength = 100;

}

else {

  maxLength = maxLength * 20;

}，如果長度小於等於6，那麼就將它的值設定為100。

否則的話長度設定為maxLength * 20。

二.相關閱讀:

（1）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

（2）.onmouseover事件可以參閱javascript的onmouseover事件一章節。

（3）.className可以參閱js的className屬性詳解一章節。

（4）.onmouseout事件可以參閱javascript的onmouseout事件詳解一章節。

（5）.replace()可以參閱javascript的replace()函式用法詳解一章節。

（6）.document.createElement()可以參閱document.createElement()方法用法介紹一章節。

（7）.appendChild()可以參閱javascript的insertBefore()函式和appendChild()用法一章節。

相關文章