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