javascript實現全國省市縣三級聯動

原文地址：http://www.cnblogs.com/yujj/archive/2012/10/08/2714712.html

 

根據網上公布的全國省市縣代碼我們可以發現擷取省，市，縣有以下規律。

1：擷取省份：

select BH,MC from DIC_Area where BH like '__0000' order by BH   

擷取省份的規律為：前兩位元不同後面四位是都為0

2.擷取市：

select BH,MC from dic_area  where BH like SUBSTRING(BH,1,2)+'__00'  and BH <> SUBSTRING(BH,1,2)+'0000' order by BH      //sql 取法

select BH, MC from dic_area t where t.bh like '%00' and substr(t.bh,4,1)<>'0' order by t.bh   //oracle 取法

擷取市的規律為：前面四位元不同後面兩位元為00並且不等於省份規律的數

3.擷取區縣資料:

select BH,MC from dic_area  where BH like SUBSTRING(BH,1,4)+'__'  and BH <> SUBSTRING(BH,1,4)+'00' order by BH    //sql 取法

select t.bh, t.mc from dic_dq t where substr(t.bh,5,1)<>'0'  order by t.bh   //oracle 取法

擷取區縣的規律為:六位元全不同並且不等於市規律的數。

根據這三個規律我們只要在後台利用遞迴演算法拼接成一個含有三級節點的JSON資料，具體資料格式如下：如北京市的json資料格式：

[  {"id":"110000","name":"北京市","node":  [    {"id":"110100","name":"市轄區","nodes":      [           {"id":"110101","name":"東城區"},           {"id":"110102","name":"西城區"},           {"id":"110105","name":"朝陽區"},           {"id":"110106","name":"丰台區"},           {"id":"110107","name":"石景山區"},           {"id":"110108","name":"海澱區"},           {"id":"110109","name":"門頭溝區"},           {"id":"110111","name":"房山區"},           {"id":"110112","name":"通州區"},           {"id":"110113","name":"順義區"},           {"id":"110114","name":"昌平區"},           {"id":"110115","name":"大興區"},           {"id":"110116","name":"懷柔區"},           {"id":"110117","name":"平穀區"}      ]    },   {"id":"110200","name":"縣","nodes":      [           {"id":"110228","name":"密雲縣"},           {"id":"110229","name":"延慶縣"}      ]    }  ]  }  ]

後台JSON資料格式拼接完成後我們就可以利用Jquery進行封裝只要一句話就可以完成省市縣三級聯動：效果如下

<td id="cboxArea"></td>     //html代碼  KTH.Area.Init('#cboxArea'); //JS代碼

這樣我們就可以實現擷取所有的省市縣三級聯動了

擷取省市縣三級聯動後如何更具後台儲存的區縣代碼載入出來儲存的省市縣，我們只要傳一個區縣的BH就可以回調出省市縣了：代碼如下

KTH.Area.Init('#cboxArea', '360101');//第二個參數為區縣代碼 以昌北開發區為例

具體如何利用JQUERY製作一個這樣的功能呢？代碼如下：

KTH.Area.List = null;    //用於存放Json資料  KTH.Area.CityList = null; //用於存放市級Json資料  KTH.Area.SetArea = function () {      if (KTH.Area.List == null) {          $.ajax({              type: 'post',              url: ajaxPath + '/ajax/area.ashx', //擷取json資料的Ajax              data: { 'active': 'selectAreaByID' },              async: false,              dataType: 'json',              success: function (json) {                  KTH.Area.List = json;  //Json資料賦值到變數              }          });      }  };  KTH.Area.GetAreaName = function (areaID) {      KTH.Area.SetArea();      var name = '';      if (KTH.Area.List != null && areaID > 0) {          $(KTH.Area.List).each(function () {              var p = this;              $(p.node).each(function () {                  if (this.id == areaID) {                      name = p.name + ' ' + this.name;                      return false;                  }              });          });      }      return name;  };  // 主方法target為傳過來的ID（<td id="cboxArea"></td>）,areaID用於資料回刷  KTH.Area.Init = function (target, areaID) {      KTH.Area.SetArea();      if (KTH.Area.List != null) {          var css = arguments[3] || 'width:102px;';          target = $(target);          var shtml = '<select class="province" style="' + css + '"><option value="">請?選?擇?</option>';          $(KTH.Area.List).each(function () {              shtml += '<option value="' + this.id + '">' + this.name + '</option>';          });          shtml += '</select> <select class="city" style="' + css + '"><option value="">請?選?擇?</option></select><select class="county" style="' + css + '"><option value="">請?選?擇?</option></select>';          target.find('select.province,select.city,select.county').remove();          $(target).append(shtml).find('select.province').bind('change', function () {              var pid = $(this).val();              var shtml = '<option value="">請?選?擇?</option>';              var countyshtml = '<option value="">請?選?擇?</option>';              $(KTH.Area.List).each(function () {                  if (this.id == pid) {                      KTH.Area.CityList = this.node;                      $(this.node).each(function () {                          shtml += '<option value="' + this.id + '">' + this.name + '</option>';                      });                      return false;                  }              });              $(this).next().html(shtml);              $(this).next().next().html(countyshtml);          });          $(target).find('select.city').bind('change', function () {              var pid = $(this).val();              var shtml = '<option value="">請?選?擇?</option>';              $(KTH.Area.CityList).each(function () {                  if (this.id == pid) {                      $(this.nodes).each(function () {                          shtml += '<option value="' + this.id + '">' + this.name + '</option>';                      });                      return false;                  }              });              $(this).next().html(shtml);          });           //資料回調實現          if (areaID > 0) {              var cityID = areaID.slice(0, 4) + '00';              var provinceID = areaID.slice(0, 2) + '0000';              var f = false;              $(KTH.Area.List).each(function () {                  KTH.Area.CityList = this;                  $(this.node).each(function () {                      if (this.id == cityID) {                          $(target).find('select.province').val(provinceID).change().end().find('select.city').val(cityID).change().end();                          f = true;                          return false;                      }                  });                  if (f)                  { return false; }              });              $(KTH.Area.CityList).each(function () {                  $(this.nodes).each(function () {                      if (this.id == areaID) {                          $(target).find('select.county').val(areaID);                          f = true;                          return false;                      }                  });                  if (f)                  { return false; }              });          }      }  };

仔細看完代碼之後不難發現實現擷取所有省份資料的方法就是迴圈Json資料第一級的資料,擷取市級資料是比對選擇載入省份的第一級Json資料子節點進行迴圈比對,擷取區縣的方法比對選擇載入市級Json資料子節點。這樣省市縣級三級聯動就完成了。

根據編號回調省市縣原理同上。

大家會發現省市縣的資料是在JS中拼接出來的<select></select>大家可以根據自己想要的實現去改拼接的html代碼.如放一個input 框當焦點聚焦在input框時可以在底下載入出來一個div層把所有資料放在層裡這樣使用者體驗會更好些。

效果如下：

隨著最近的學習其實利用JS設計模式可以封裝很多實用的功能例如封裝樹型結構，整套資料驗證功能，提高開發效率，以後也會慢慢公布這些功能。

有對前端技術感興趣的可以加入：113777786