使用Ajax

Question

我需要根据所选的地区在{strong>省下拉列表中使用ajax进行填充。我有一个功能，可在Windows加载时填充区域选择下拉列表：

$(function(){
let dropdown = $('#region');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Please choose your region</option>');
dropdown.prop('selectedIndex', 0);

const url = 'data.json';

// Populate dropdown with list of provinces
$.getJSON(url, function (data) {
  $.each(data, function (key, entry) {
    dropdown.append($('<option></option>').attr(entry.region_name).text(entry.region_name);
  })
});

});

json结构概述：

{
  "01": {
    "region_name": "REGION I",
    "province_list": {
      "province_1": {
        "city_list": {
          "city-1": {
            "street_list": [
              "street-1"
            ]
          },
          "city-2": {
            "street_list": [
              "street-1",
              "street-2",
              "street-3"
            ]
          }
        }
      }
    }
  },
  "02": {
    "region_name": "REGION II",
    "province_list": {
      "province_1": {
        "city_list": {
          "city-1": {
            "street_list": [
              "street-1",
              "street-2",
              "street-3"
            ]
          }
        }
      },
      "province_2": {
        "city_list": {
          "city-1": {
            "street_list": [
              "street-1",
              "street-2",
              "street-3"
            ]
          },
          "city-2": {
            "street_list": [
              "street-1",
              "street-2",
              "street-3"
            ]
          }
        }
      }
    }
  }
}

html看起来像这样：

<form id="selectForm">
   <div class="region-select">
      <select id="region" name="region">
      </select>
   </div>
   <div class="province-select">
      <select id="province" name="province">
      </select>
   </div>
</form>

现在我需要根据所选区域填充省份选择下拉列表，但由于我在jquery方面的知识有限，因此我无法执行此操作。

我的ajax请求如下：

  var region = $('#region');
  var province = $('#province');

$(function() {
      region.change(function() {
          $.ajax({
              url: 'data.json',
              dataType: 'json',
              success: function(data) {

                  function findRegionId(data, provinceId) {
                      for (var i in data.region_name) {
                          for (var j in data.region_name[i].province_list) {
                              if (data.region_name[i].id == provinceId) {
                                  return (data.region_name[i].province_list);
                              }
                          }
                      }
                  }

                  var curRegionVal = region.find(':selected').data('value');
                  var curRegionId = findRegionId(data, +curRegionVal);

                      for (var populateProvince in curRegionId) {

                          $populateOpt = $('<option value="' + curRegionId[populateProvince] + '">' + curRegionId[populateProvince] + '</option>');
                          province.append($populateOpt);
                      }


              },
              statusCode: {
                  404: function() {
                      alert('There was a problem with the server. Try again soon!');
                  }
              }
          });
      });
  });

此代码未填充省份选择框 任何帮助将不胜感激