javascript - 使用 JavaScript 循环遍历 Json 文件中的多个数组

Question

请原谅我缺乏知识，因为我从未处理过 Json 数组。我正在尝试创建一个动态下拉系统，其中我有国家下拉菜单和城市下拉菜单，并且我想从其中包含多个数组的 Json 文件中获取我的数据，这是我拥有的 Json 文件的示例：

{"Array1":["A","B","C","D"] , "Array2":["W","X","Y","Z"]}

请我如何加载文件，然后以一种我可以将“Array1”和“Array2”作为国家下拉列表中的值的方式循环遍历这些数组，然后当我选择两者中的一个时生成城市（array1 里面有什么或 arya2) 在第二个下拉列表中。

任何帮助将不胜感激。

标签： javascriptarraysjsonloopsdrop-down-menu

Answer 1

const data = {"Array1":["A","B","C","D"] , "Array2":["W","X","Y","Z"]};

Object.keys(data).forEach(arrName => {
  $(Layer1).append(`<option>${arrName}</option>`);
});

$(Layer1).on('change', function() {
  const arrName = $(this).val();
  if (arrName) {
    $('.dynamic').remove();
    data[arrName].forEach(value => {
      $(Layer2).append(`<option class="dynamic">${value}</option>`);
    });
    $(Layer2).show();
  } else {
    $(Layer2).hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="Layer1">
  <option disabled selected></option>
</select>
<select id="Layer2" style="display: none;">
  <option disabled selected></option>
</select>