jQuery解析json格式資料生成級聯選單

admin發表於2017-04-15
jQueryJSON

分享一段程式碼例項，它實現了從json格式資料中讀取相關省市縣資料，生成級聯選單。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
select{
  border:1px solid #c9c9c9;
  background-color:#fff;
  color:#666;
  height:28px;
  line-height:28px;
  padding:4px 6px;
  font-size:14px;
  border-radius:4px;
  cursor:pointer;
  outline:none;
}
</style>
</head>
<body>
<select id="one">
  <option value="">請選擇省份</option>                
</select>
<select id="two">
  <option value="">請選擇城市</option>
</select>
<select id="three">
  <option value="">請選擇區域</option>
</select>        
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var province = [
    {
      "name" : "廣東省" ,
      "city" : [
        {
          "name" : "廣州市" ,
          "area" : ["越秀區","荔灣區","海珠區","天河區"]
        },
        {
          "name" : "深圳市" ,
          "area" : ["福田區","羅湖區","南山區","寶安區","龍崗區"]
        }
      ]
    },
    {
      "name" : "河南省" ,
      "city" : [
        {
          "name" : "鄭州市" ,
          "area" : ["中原區","二七區","管城回族區","金水區"]
        },
        {
          "name" : "洛陽市" ,
          "area" : ["西工區","老城區","瀍河回族區","澗西區"]
        }
      ]
    },
    {
      "name" : "江西省" ,
      "city" : [
        {
          "name" : "南昌市" ,
          "area" : ["東湖區","西湖區","青雲譜區","灣裡區"]
        },
        {
          "name" : "九江市" ,
          "area" : ["潯陽區","廬山區","瑞昌市","九江縣"]
        }
      ]
    },
  ];
  
  // 二級聯動
  $("#two").change(function(){
    var one_index = $("#one option:selected").index();
    var two_index = $("#two option:selected").index();
    var three = $("#three");
    three.empty().append("<option>請選擇區域</option>");
  
    if(two_index > 0){
      var area = province[one_index-1].city[two_index-1].area;
      for(var index = 0; index < area.length; index++){
        three.append("<option>"+area[index]+"</option>");
      }
    }
  });
  
  // 一級聯動
  $("#one").change(function(){
    var one_index = $("#one option:selected").index();
    var two = $("#two");
  
    two.empty().append("<option>請選擇城市</option>");
    $("#three").empty().append("<option>請選擇區域</option>");//清除
  
    if(one_index > 0){
      var city = province[one_index-1].city;
      for(var index = 0 ; index < city.length ; index++){
        two.append("<option>"+city[index].name+"</option>");
      }
    }
  });
  
  init();
  function init(){
    for(var index = 0 ; index < province.length ; index++){
      $("#one").append("<option>"+province[index].name+"</option>");
    }
  }
});
</script>
</body>
</html>

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

一.程式碼註釋:

（1）.$(function(){}）,文件結構完全載入完畢再去執行函式中的程式碼，在這裡其實沒有必要，因為程式碼放在的頁面的底部。

（2）.

[JavaScript] 純文字檢視 複製程式碼
var province = [
  {
    "name" : "廣東省" ,
    "city" : [
      {
        "name" : "廣州市" ,
        "area" : ["越秀區","荔灣區","海珠區","天河區"]
      },
      {
        "name" : "深圳市" ,
        "area" : ["福田區","羅湖區","南山區","寶安區","龍崗區"]
      }
    ]
  }
]

儲存資料的json格式物件，僅以廣東省為例子。

陣列的元素是物件，物件的name屬性標識省份，city標識省份下的城市。

city又指向一個陣列，這個陣列元素也是物件，name屬性標識城市，area屬性是儲存地區的陣列。

（3）.$("#two").change(function(){})，為城市下拉選單註冊change事件處理函式。

（4）.var one_index = $("#one option:selected").index()，獲取省份下拉選單選中option項的索引。

（5）.var two_index = $("#two option:selected").index()，獲取城市下拉選單選中option項的索引。

（6）.var three = $("#three")，獲取地區select下拉選單。

（7）.three.empty().append("<option>請選擇區域</option>")，首先清空原來下拉選單的項，防止以前的暴力，然後新增預設項。

（8）.if(two_index > 0){}，如果所以只不是0，那麼就指向相應的動作，因為等於0的話，相當於沒有選中任何城市。

（9）. province[one_index-1].city[two_index-1].area，從json資料結構中取出對應的地區陣列。

（10）.for(var index = 0; index < area.length; index++){

  three.append("<option>"+area[index]+"</option>");

}，通過迴圈方式，將地區新增到select下拉選單。

二.相關閱讀:

（1）.json更多內容可以參閱json教程板塊。

（2）.index()可以參閱jQuery index()方法一章節。

（3）.empty()可以參閱jQuery empty() 方法一章節。

（4）.change事件可以參閱jQuery change事件一章節。

相關文章