【JavaScript】2018最新的省市区，获取json，实现三级联动选择省市区（底部源码地址）

最新推荐文章于 2022-07-25 11:41:59 发布

置顶

时间飞逝子非鱼

最新推荐文章于 2022-07-25 11:41:59 发布

阅读量7k

点赞数

分类专栏： Jquery 工作总结文章标签：函数 json 应用

本文链接：https://blog.csdn.net/lgysjfs/article/details/79163241

版权

该博客介绍了如何利用JavaScript获取最新的省市区JSON数据，并在网页中实现三级联动选择功能。由于getJson()方法存在跨域限制，因此需在本地服务器环境中运行页面。博主提供了完整的代码实现和源码下载链接。

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

注意：因为getJson()方法是不能获取本地文件的，所以页面必须要在本地服务器打开，否则会产生跨域问题。

服务器打开页面

这里写图片描述

本地file模式打开页面

这里写图片描述

代码应用部分

_loadRegion(localStorage.language,function(){
   
            publicRegionObj = opreateRegion($('#province'),$('#city'),$('#county'));
        });

方法编写部分

var publicCityObj = null;
// 加载城市
//新的省市区
var _loadRegion = function(_language, callback) {
   
    if (publicCityObj) { //如果这个对象存在，说明已经执行过该函数，可以直接退出
        return;
    }
    var provinces = [];
    var city = [];
    var area = [];
    var cityCache = {};
    var areaCache = {};
    var getcityNameCache = {};
    var getProvinceNameCache = {};
    var getAreaNameCache = {};
    var allRegionCache = {};
    var i = 0;
    var allRegion = null;
    var loadRegionSuccess = function() {
   
        i++;
        if (i == 3) {
            publicCityObj = obj;
            allRegion = [].concat(provinces, city, area);
            if (callback) { callback() }
        }
    }
    $.getJSON('../js/city/provinces_' + _language + '.json', function(resdata) {
   
        provinces = resdata;
        loadRegionSuccess()
    })
    var isLoadCityBack = $.getJSON('../js/city/cities_' + _language + '.json', function(resdata) {
   
        city = resdata;
        $.each(resdata, function(index, item) {
   
            if (!cityCache[item.parent_code]) {
                cityCache[item.parent_code] = [];