javascript实现全国省市县三级联动

根据网上公布的全国省市县代码我们可以发现获取省，市，县有以下规律。

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