js遍历省市区三级

最新推荐文章于 2024-04-01 11:25:56 发布

Artoro

最新推荐文章于 2024-04-01 11:25:56 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： js 遍历省市区

本文链接：https://blog.csdn.net/Artoro/article/details/84841977

版权

本文介绍了如何使用JavaScript实现省市区三级联动的效果，通过加载JSON数据来填充HTML页面，实现动态选择的效果。

摘要由CSDN通过智能技术生成

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;
}

=====&