Javascript、jQuery、Json和；AJAX

当我选择一个选项时，它将只填充一个区域，我如何才能做到这一点？ 我只想要那个地区的具体位置。 示例图片。]

这是json代码，我希望有一个函数并连接两个或多个文件

json文件1

 {
    "code": "010000000",
    "name": "Ilocos Region",
    "altName": "Region I"
  }

json文件2

{
    "code": "012800000",
    "name": "Ilocos Norte",
    "altName": null,
    "region": "010000000"
  },
  {
    "code": "012900000",
    "name": "Ilocos Sur",
    "altName": null,
    "region": "010000000"
  },
  {
    "code": "013300000",
    "name": "La Union",
    "altName": null,
    "region": "010000000"
  },
  {
    "code": "015500000",
    "name": "Pangasinan",
    "altName": null,
    "region": "010000000"
  }

这是密码

html部分

<div class="container form-group" style="width:600px; margin-top: 10vh">
    <form action="" method="GET" id="addform">
        <div class="form-group">
        <select name="region" id="region" class="form-control input-sm" required>
            <option value="">Select Region</option>
        </select>
    </div>

        <div class="form-group">
        <select name="province" id="province" class="form-control input-sm" required>
            <option value="">Select Province</option>
        </select>
        </div>

    </form>
</div>

选择区域
选择省

$（函数（）{
让区域选择；
让provinceOption；
//地区
$.getJSON（'regions.json'，函数（结果）{
regionOption+=`选择区域'；
$。每个（结果、函数（i、区域）{
regionOption+=`${region.altName}`；
});
$（'#region'）.html（regionOption）；
});
//省
$（'#region'）。更改（函数（）{
$.getJSON（'provinces.json'，函数（结果）{
provinceOption+=`选择省'；
$。每个（结果、职能（地区、省）{
provinceOption+=`${province.name}`；
});
$（'#province'）.html（provinceOption）；
});
});
});

我失败的尝试是这一部分：

$('#region').change(function(){
        if($(this).val() === $(this).val()){
        $.getJSON('provinces.json', function(result){
            provinceOption += `<option value="">Select Province</option>`;
            $.each(result, function(region, province){
                provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
            });
            $('#province').html(provinceOption);
        });
        }
    });

$（“#区域”）.change（函数（）{
if（$（this.val（）===$（this.val（））{
$.getJSON（'provinces.json'，函数（结果）{
provinceOption+=`选择省'；
$。每个（结果、职能（地区、省）{
provinceOption+=`${province.name}`；
});
$（'#province'）.html（provinceOption）；
});
}
});

您可以使用

.filter（）

在ajax中过滤json返回，然后在此框中比较select框的值与

区域的所有值，如果它们匹配，则获取该数据。最后，循环过滤数据并在选择框中显示它们

演示代码：


//仅用于演示：）
var结果=[{
“代码”：“010000000”，
“名称”：“Ilocos区域”，
“altName”：“区域I”
}, {
“代码”：“010000002”，
“名称”：“Ilocos区域2”，
“altName”：“区域2”
}]
var json2=[
{
“代码”：“012800000”，
“名称”：“北方伊洛科斯”，
“altName”：空，
“地区”：“010000000”
},
{
“代码”：“012900000”，
“名称”：“南伊洛科斯”，
“altName”：空，
“地区”：“010000000”
},
{
“代码”：“01300000”，
“名称”：“La Union”，
“altName”：空，
“地区”：“010000002”
},
{
“代码”：“015500000”，
“名称”：“Pangasinan”，
“altName”：空，
“地区”：“010000002”
}
]
$（函数（）{
让区域选择；
让provinceOption；
//地区
/*$.getJSON（'regions.json'，函数（结果）{*/
regionOption+=`选择区域'；
$。每个（结果、函数（i、区域）{
regionOption+=`${region.altName}`；
});
$（'#region'）.html（regionOption）；
/* });*/
$（'#region'）。更改（函数（）{
var值=$（this.val（）
var provinceOption=“”
/*$.getJSON（'provinces.json'，函数（json2）{*/
//过滤你的json返回。。
变量项=$（json2）
.过滤器（功能（i，n）{
返回n.region==values；//获取区域相同的值
});
provinceOption+=`选择省'；
//循环浏览日期
$。每个（项目、职能（地区、省）{
provinceOption+=`${province.name}`；
});
$（'#province'）.html（provinceOption）；
/*  });*/
});
});

选择区域
选择省
Heyy！它起作用了！！非常感谢你！我刚醒来看到这个答案，然后尝试一下。。。谢谢你，伙计，你是救命恩人
$('#region').change(function(){
        if($(this).val() === $(this).val()){
        $.getJSON('provinces.json', function(result){
            provinceOption += `<option value="">Select Province</option>`;
            $.each(result, function(region, province){
                provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
            });
            $('#province').html(provinceOption);
        });
        }
    });