Html 如何使用jQuery对本地JSON文件使用一个请求来填充多个下拉列表？

我试图在我的项目的多个地方使用国家/城市下拉列表，但是我遇到了一个不寻常的行为——当我改变国家/地区时。如何发出一个请求来获取本地JSON文件并填充多个下拉列表？ 这是我的密码：

$(document).ready(function() {
fetch('assets/test.json').then(response => {return response.json()}).then(selectData => {
  console.log(selectData)
  function updateSelectsBirth() {
      let citiesBirth = selectData[this.value].map((key, val) => {
        return $("<option />").text(key).val(key);
      });
      $("#cityBirth, #cityBirth1").empty().append(citiesBirth);
    }
    let stateBirth;
    $countryBirth = $("#countryBirth, #countryBirth1").on("change", updateSelectsBirth);        
    for (stateBirth in selectData) {
      $("<option />").text(stateBirth).val(stateBirth).appendTo($countryBirth);
    }
    $countryBirth.change();
  })  
});

$（文档）.ready（函数（）{
fetch（'assets/test.json'）。然后（response=>{return response.json（）}）。然后（selectData=>{
console.log（选择数据）
函数updateSelectsBirth（）{
让citiesBirth=selectData[this.value].map（（key，val）=>{
返回$（“”）.text（key）.val（key）；
});
$（“#城市出生，#城市出生1”）.empty（）.append（citiesBirth）；
}
让国家诞生；
$countryBirth=$（“#countryBirth，#countryBirth1”）。在（“更改”，更新选择栏）；
for（selectData中的StateBearth）{
$（“”）.text（stateBirth）.val（stateBirth）.appendTo（$countryborth）；
}
$countryborning.change（）；
})  
});

还有HTML

<select id="countryBirth"></select>
<select id="cityBirth"></select>
<br/>
<select id="countryBirth1"></select>
<select id="cityBirth1"></select>

---

这里还有一个指向演示项目的链接：

意外行为来自

$("#cityBirth, #cityBirth1").empty().append(citiesBirth);

因为，当它更新城市时，它更新的是所有下拉列表，而不是一个

因此，您可以尝试：

$(document).ready(function() {
fetch('assets/test.json').then(response => {return response.json()}).then(selectData => {
  // console.log(selectData)
  function updateSelectsBirth(event) {
      let citiesBirth = selectData[this.value].map((key, val) => {
        return $("<option />").text(key).val(key);
      });
      // console.log(event.data.target)
      $(event.data.target).empty().append(citiesBirth);
    }
    let stateBirth;
    $countryBirth = $("#countryBirth").on("change", {target: "#cityBirth"}, updateSelectsBirth);   
    $countryBirth1 = $("#countryBirth1").on("change", {target: "#cityBirth1"}, updateSelectsBirth);   
    // $countryBirth1 = $("#countryBirth1").on("change", updateSelectsBirth("#cityBirth1"));        
    for (stateBirth in selectData) {
      $("<option />").text(stateBirth).val(stateBirth).appendTo($countryBirth);
      $("<option />").text(stateBirth).val(stateBirth).appendTo($countryBirth1);
    }
    $countryBirth.change();
    $countryBirth1.change();
  })  
});

$（文档）.ready（函数（）{
fetch（'assets/test.json'）。然后（response=>{return response.json（）}）。然后（selectData=>{
//console.log（选择数据）
函数updateSelectsBirth（事件）{
让citiesBirth=selectData[this.value].map（（key，val）=>{
返回$（“”）.text（key）.val（key）；
});
//console.log（event.data.target）
$（event.data.target）.empty（）.append（citiesBirth）；
}
让国家诞生；
$countryBirth=$（“#countryBirth”）。在（“更改”{target:“#cityBirth”}上，更新Selectsbirth）；
$countryBirth1=$（“#countryBirth1”）。在（“更改”{target:“#cityBirth1”}上，更新selectsbirth）；
//$countryBirth1=$（“#countryBirth1”）。在（“更改”上，更新selectsbirth（“#cityBirth1”）；
for（selectData中的StateBearth）{
$（“”）.text（stateBirth）.val（stateBirth）.appendTo（$countryborth）；
$（“”）.text（stateBirth）.val（stateBirth）.appendTo（$countryBirth1）；
}
$countryborning.change（）；
$countryBirth1.change（）；
})  
});

---

很抱歉，这不是一个完整的答案，因为我没有概括到多个下拉列表，但是我还不能留下评论。我希望这仍然有帮助。

谢谢你，艾琳！你的回答把我推向了正确的方向，非常有帮助！