在下拉列表中使用 Jquery 解析 JSON

Question

我正在使用下拉菜单构建一个特定的位置选择器。我需要3个下拉菜单。 现在我得到了 json 并尝试相应地解析它，但我遇到了一些问题。这是我正在使用的 json 的一小部分。

{
"Chandigarh": {
    "CHANDIGARH": ["Sector 21 (Chandigarh)", "Sector 22 (Chandigarh)", "Sector 23 ( Chandigarh)", "Sector 26 (Chandigarh)", "Sector 29 (Chandigarh)", "Sector 30"]}
 "Andhra Pradesh": {
    "EAST GODAVARI": ["D Vemavaram", "Gangavaram", "GSL Medical College", "Konthamuru", "Navara", "Satellite City"]
      "CHITTOOR": ["Appa Rao Street", "Madanapalle Spinning Mills Gds", "Akkurthi", "Chiyyavaram", "Chodavaram", "Gottipudi", "Kasaram", "Muchivolu", "Obulayapalle"]}
}

所以我试图将州解析为一个下拉列表，并且可以选择基于州的子区域，并且可以选择基于子区域的城市名称。 例如。如果我在一个下拉列表中选择“Andhra Pradesh”，其他必须显示“East Godavri”和“chittoor”，无论我选择哪个，都必须在第三个下拉列表中显示它的城市。 到目前为止，我已经尝试过使用 jquery getjson

$.getJSON(url, function(data) {
console.log(data);
$.each(data, function(index, value) {


  $("#state").append(
    '<option value="' + index + '">' + index + "</option>"
  );
});


 });



 $("#state").change(function() {


countryCode = $("#state").val();

$.getJSON(url, function(data) {

  $('#sub').append('<option value="">Please select your region</option>');
  $.each(data.response.venue.countryCode, function(index, value) {

    $("#sub").append(
      '<option value="' + index + '">' + index + "</option>"
    );
  });
});


 });

我正在获取所有城市名称，但不是子区域，任何可以帮助我的人

Answer 1

首先让我们将 JSON 数据重构为此包含一个选项 id（使用id 作为选项的值）

[
  {
    id: 1,
    name: "Chandigarh",
    regions: [
      {
        id: 2,
        name: "CHANDIGARH",
        areas: [
          { id: 3, name: "Sector 21 (Chandigarh)" },
          { id: 4, name: "Sector 22 (Chandigarh)" },
          { id: 5, name: "Sector 23 ( Chandigarh)" },
          { id: 6, name: "Sector 26 (Chandigarh)" },
          { id: 7, name: "Sector 29 (Chandigarh)" },
          { id: 8, name: "Sector 30" }
        ]
      }
    ]
  },
  {
    id: 9,
    name: "Andhra Pradesh",
    regions: [
      {
        id: 10,
        name: "EAST GODAVARI",
        areas: [
          { id: 11, name: "D Vemavaram" },
          { id: 12, name: "Gangavaram" },
          { id: 13, name: "GSL Medical College" },
          { id: 14, name: "Konthamuru" },
          { id: 15, name: "Navara" },
          { id: 16, name: "Satellite City" }
        ]
      },
      {
        id: 17,
        name: "CHITTOOR",
        areas: [
          { id: 18, name: "Appa Rao Street" },
          { id: 19, name: "Madanapalle Spinning Mills Gds" },
          { id: 20, name: "Akkurthi" },
          { id: 21, name: "Chiyyavaram" },
          { id: 22, name: "Chodavaram" },
          { id: 23, name: "Gottipudi" },
          { id: 24, name: "Kasaram" },
          { id: 25, name: "Muchivolu" },
          { id: 26, name: "Obulayapalle" }
        ]
      }
    ]
  }
]

更新获取代码以将数据保存到变量中。

var states;

$.getJSON(url, function (data) {
  states = data; // Save data to variable, so no need to fetch data everytime user change the select
  $("#state").html(`<option>Select State..</option>`);
  $("#region").html(`<option>Select region..</option>`);
  $("#area").html(`<option>Select area..</option>`);
  $.each(states, function (index, state) {
    $('#state').append(`<option value="${state.id}">${state.name}</option>`);
  });
});

然后将事件分配给选择

$("#state").bind("change", function() { // When select state change
  let state = states.find(s => s.id == $(this).val());

  // set region options

  $("#region").html(`<option>Select region..</option>`);
  $.each(state.regions, function(index, region) {
    $("#region").append(`<option value="${region.id}">${region.name}</option>`);
  });

  $("#area").html(`<option>Select area..</option>`);
});

$("#region").bind("change", function() { // When select region change
  let region = states
    .map(s => s.regions)
    .flat()
    .find(r => r.id == $(this).val());

  // set area options

  $("#area").html(`<option>Select area..</option>`);
  $.each(region.areas, function(index, area) {
    $("#area").append(`<option value="${area.id}">${area.name}</option>`);
  });
});

这里是完整的例子

https://codesandbox.io/s/5k87rkr16p