如何获得二级列表以填充json数据？

Question

我有一个json数据文件，我正在将该文件加载到页面中并动态填充一些元素。我还需要从动态数据中填充另一个选择列表（＃dynamic-zone-list），就像上一个问题一样，我陷入了困境。

我尝试过复制首先获得动态数据的js，但没有收到任何错误，但是提供的代码并未填充列表。该选择会显示出来，但是里面什么也没有，我需要稍后能够使用该选择列表来再次动态更改另一个元素。

顶部还有一些console.log的东西需要测试，请不要理会。

Javascript

// Data Files
const dataFile = "./app/assets/data/schools.json";
const fileInput = fs.readFileSync(dataFile);
const result = JSON.parse(fileInput);

// Important Global variables
const App = $("#App"),
  loadDashboard = "/app/html/dashboards/schooldashboard.html",
  dynamicZoneList = $("#dynamic-zone-list");

function setup() {
  loadJSON("/app/assets/data/schools.json", receivedData);
}

function receivedData(data) {
  console.log(data);
}

$.each(result, function(i) {
  var schools = result.schools;

  for (var i = 0; i < schools.length; i++) {
    console.log(schools[i].id + " " + schools[i].name + " " + schools[i].topic);
  }
});

/////////// This is where I generate the dynamic content. 
/////////// I am trying to generate the second dropdown list here as well. 
///////////The dynamic content in div id="dynamic-school-name" 
///////////populates correctly  

function loadSchools() {
  if (App.hasClass("schoolDash")) {
    var value = menuDropdown.val(),
      zoneOutput = "";
    // get option based on value attribute
    var option = menuDropdown.find('option[value="' + value + '"]');
    var schools = result.schools[option.data("index")];
    $("#dynamic-school-name").html(schools.name);
    for (var i = 0; i < schools.length; i++) {
      zoneOutput += "<option>" + schools[i].name + "</option>";
    }
    dynamicZoneList.html(zoneOutput);
  } else {
    App.load(loadDashboard, function() {
      var value = menuDropdown.val(),
        zoneOutput = "";
      // get option based on value attribute
      var option = menuDropdown.find('option[value="' + value + '"]');
      var schools = result.schools[option.data("index")];
      $("#dynamic-school-name").html(schools.name);
      for (var i = 0; i < schools.length; i++) {
        zoneOutput += "<option>" + schools[i].name + "</option>";
      }
      dynamicZoneList.html(zoneOutput);
      App.addClass("schoolDash");
    });
  }
}

var menuDropdown = $("#schoolDropdown");
var output = "";
var schools = result.schools;
console.log(schools);

for (var i = 0; i < schools.length; i++) {
  output +=
    '<option value="' +
    schools[i].topic +
    '" data-index="' +
    i +
    '" ' +
    'id="' +
    schools[i].id +
    '" ' +
    'name="dropDownItem' +
    i +
    '">' +
    schools[i].name +
    "</option>";
}

menuDropdown.html(output);

menuDropdown.change(function() {
  loadSchools()
});

简单的html-那里还没有很多，并且ID正在动态填充

<h2 class="dynamic-school-name" id="dynamic-school-name"></h2>
<div class="col-3">
    <select class="dynamic-zone-list" size="100" name="zone-list" id="dynamic-zone-list"></select>
</div>
<div class="col-9">

</div>

我希望使用id = dynamic-zone-list的select填充在loadSchools（）函数中调用的数据。如我所说，我没有收到任何错误，但是数据没有加载。我想我已经在loadSchools（）中正确地完成了我的异步回调，但是仍然没有数据。我将在以后放入不同的数据，但是school [i] .name是我知道我可以轻松访问的数据。我们非常感谢您提供选择方面的帮助。