js遍历省市区三级

js 遍历省市区三级联动

var appointProvinces, appointCity, appointArea;
// $.ajax(
var cityJson;
加载城市json文件
$.getJSON("/static/app/json/cityJson.json", function (data) {
    console.log(data);
    cityJson = data.location.childs[100000];
});

//得到省份 如果有指定的区域 则找出指定区域所在的省份
//cityData 为 上面解析的cityJson
function getProvinces(appointAreaId, cityData) {
    var ps = [];
    for (var i in cityData.childs) {
        var pi = cityData.childs[i];
        ps.push(pi);
        if (appointAreaId != null && typeof appointAreaId != "undefined") {
            for (var j in pi.childs) {
                var ci = pi.childs[j];
                for (var z in ci.childs) {
                    if (appointAreaId == z) {
                        appointProvinces = pi;
                        appointCity = ci;
                        appointArea = ci.childs[z];
                        appointAreaId = null;
                    }
                }
            }
        }
    }
    return ps;
}

//根据省份得到市或者自治市  provinces为上面获得的省份数组
function getCity(provinceId, provinces) {
    var cs = [];
    if (null == provinces || provinces.length <= 0 || null == provinceId || provinceId <=0) {
        alert("请先选择省份");
        return;
    }
    $.each(provinces, function (i, e) {
        if (e.id == provinceId) {
            for (var i in e.childs) {
                cs.push(e.childs[i]);
            }
        }
    });
    return cs;
}

//根据市找到下面的区或西安  city为上面市的数组
function getArea(cityId, city) {
    var as = [];
    if (null == city || city.length <= 0 || null ==cityId || cityId <= 0) {
        alert("请先选择市");
        return;
    }
    $.each(city, function (i, e) {
        if (e.id == cityId) {
            for (var i in e.childs) {
                as.push(e.childs[i]);
            }
        }
    });
    return as;
}

==========================================================
我的html文件

 

                所在省
                
            

            

                所在市
                
            

            

                所在区
                
            

========================================
js文件进行填充

添加时候的js片段
 var commonstr = '请选择';
	var provinces = [];
 var provinceStr = commonstr;
    provinces = getProvinces($(this).attr("uAreaId"), cityJson);
    var city = [], area = [];
    $.each(provinces, function (i, e) {
        if (typeof appointProvinces != "undefined" && e.id == appointProvinces.id) {
            provinceStr += '' + e.name + ''
        } else
            provinceStr += '' + e.name + ''
    });
    $("#provinceEdit").append(provinceStr);
    if(typeof appointProvinces != "undefined"){
        var cityStr = commonstr;
        city = getCity($("#provinceEdit").val(), provinces);
        $.each(city, function (i, e) {
            if (typeof appointCity != "undefined" && e.id == appointCity.id) {
                cityStr += '' + e.name + ''
            } else
                cityStr += '' + e.name + ''
        });
        $("#cityEdit").html(cityStr);
        var areaStr = commonstr;
        area = getArea($("#cityEdit").val(), city);
        $.each(area, function (i, e) {
            if(typeof appointArea != "undefined" && e.id == appointArea.id){
                areaStr += '' + e.name + ''
            }else
                areaStr += '' + e.name + ''
        });
        $("#areaEdit").html(areaStr);
    }
    $("#provinceEdit").change(function () {
        var cityStr = commonstr;
        city = getCity($("#provinceEdit").val(), provinces);
        var flag = true;
        while (flag) {
            if (typeof city == "undefined") {
                continue;
            }
            flag = false;
            $.each(city, function (i, e) {
                cityStr += '' + e.name + ''
            });
            $("#cityEdit").html(cityStr);
            $("#areaEdit").html(commonstr);
        }
    });
    $("#cityEdit").change(function () {
        var areaStr = commonstr;
        area = getArea($("#cityEdit").val(), city);
        $.each(area, function (i, e) {
            areaStr += '' + e.name + ''
        });
        $("#areaEdit").html(areaStr);
    });
    =================================================
    修改时候js的片段
     var provinceStr = commonstr;
    provinces = getProvinces($(this).attr("uAreaId"), cityJson);
    var city = [], area = [];
    $.each(provinces, function (i, e) {
        if (typeof appointProvinces != "undefined" && e.id == appointProvinces.id) {
            provinceStr += '' + e.name + ''
        } else
            provinceStr += '' + e.name + ''
    });
    $("#provinceEdit").append(provinceStr);
    if(typeof appointProvinces != "undefined"){
        var cityStr = commonstr;
        city = getCity($("#provinceEdit").val(), provinces);
        $.each(city, function (i, e) {
            if (typeof appointCity != "undefined" && e.id == appointCity.id) {
                cityStr += '' + e.name + ''
            } else
                cityStr += '' + e.name + ''
        });
        $("#cityEdit").html("").html(cityStr);
        var areaStr = commonstr;
        area = getArea($("#cityEdit").val(), city);
        $.each(area, function (i, e) {
            if(typeof appointArea != "undefined" && e.id == appointArea.id){
                areaStr += '' + e.name + ''
            }else
                areaStr += '' + e.name + ''
        });
        $("#areaEdit").html("").html(areaStr);
    }
    $("#provinceEdit").change(function () {
        var cityStr = commonstr;
        city = getCity($("#provinceEdit").val(), provinces);
        var flag = true;
        while (flag) {
            if (typeof city == "undefined") {
                continue;
            }
            flag = false;
            $.each(city, function (i, e) {
                cityStr += '' + e.name + ''
            });
            $("#cityEdit").html("").html(cityStr);
            $("#areaEdit").html("").html(commonstr);
        }
    });
    $("#cityEdit").change(function () {
        var areaStr = commonstr;
        area = getArea($("#cityEdit").val(), city);
        $.each(area, function (i, e) {
            areaStr += '' + e.name + ''
        });
        $("#areaEdit").html("").html(areaStr);
    });

省市区三级json文件下载