如何填充遍历JSON文件中的对象的下拉列表中可能无限的数量？

Question

因此，我试图填充三个单独的下拉菜单（最终可能会更多），具体取决于从每个下拉列表中进行的选择，这些对象是从不同JSON文件中提取的。因此，第一个选择填充第二个选择，依此类推。

这些是下拉菜单：

<form>
    <div>
        <select id="level1">
            <option selected value="base">Please select one</option>
            <option value="first-option">First one</option>
            <option value="second-option">Second one</option>
        </select>
    </div>

    <div>
        <select id="level2" class="form-control">
            <option selected value="base">Please select one</option>
        </select>
    </div>

    <div>
        <select id="level3" class="form-control">
            <option selected value="base">Please select one</option>
        </select>
    </div>

    <div id="submit">
        <button type="submit">Go</button>
    </div>
</form>

这是一个示例JSON文件：

{
  "first_option": {
    "me": "first_option",
    "COD_REF": "MX09017CL01AP",
    "TITLE": "First Option",
    "children": {
      "child01": {
        "me": "child01",
        "COD_REF": "001",
        "TITLE": "Child 1",
        "children": {
          "grandchild01": {
            "me": "grandchild01",
            "TITLE": "Grandchild 1"
          },
          "grandchild02": {
            "me": "grandchild01",
            "TITLE": "Grandchild 1"
          }
        }
      }
    },
    "child02": {
      "me": "child02",
      "COD_REF": "002",
      "TITLE": "Child 2",
      "children": {
        "grandchild01": {
          "me": "grandchild01",
          "TITLE": "Grandchild 1"
        },
        "grandchild02": {
          "me": "grandchild01",
          "TITLE": "Grandchild 1"
        }
      }
    },
  }
}

我想出的解决方案效果很好。问题是我可能可以进行一些迭代，但我只是不知道该怎么做。这是我所拥有的简短版本：

var vals = [];
var $level1 = $("#level1");
var $level2 = $("#level2");
var $level3 = $("#level3");

function generateTable(info) {
  $(".COD_REF").innerHTML(info.COD_REF);
  $(".TITLE").innerHTML(info.TITLE);
};

function generateTable2(info) {
  $(".COD_REF").innerHTML(info.COD_REF);
  $(".TITLE").innerHTML(info.TITLE);
}

function generateTable3(info) {
  $(".COD_REF").innerHTML(info.COD_REF);
  $(".TITLE").innerHTML(info.TITLE);
}

//first dropdown
$("#level1").change(function () {
  var $dropdown = $(this);
  var key = $dropdown.val();

  function generateDropdown(vals) {
    $level2.append("<option selected value=\"base\">Please select one</option>");
    $.each(vals, function (index, value) {
      $level2.append("<option value=\"" + value.me + "\">" + value.TITLE + "</option>");
    });
  };

  switch (key) {
    case 'first_option':
    $.getJSON("recursos/json/ajsonfile.json", function (data) {
      $level2.empty();

      vals = data.first_option.children;
      generateDropdown(vals)

      $("#first-table").removeClass("d-none");
      $("#first-table").addClass("d-block");

      info = data.first_option;
      $(".first-title").innerHTML(info.TITLE);
      generateTable(info);
    });
    break
    case 'second_option':
    $.getJSON("recursos/json/anotherjsonfile.json", function (data) {
      $level2.empty();

      vals = data.second_option.children;
      generateDropdown(vals)

      $("#first-table").removeClass("d-none");
      $("#first-table").addClass("d-block");

      info = data.second_option;
      $(".first-title").innerHTML(info.TITLE);
      generateTable(info);
    });
    break
    case 'base':
    $level2.empty();
    vals = ['Please select one'];
    $level2.append("<option>" + vals + "</option>");
    $("#first-table").removeClass("d-block");
    $("#first-table").addClass("d-none");
    console.log(vals);
    break
  }
});

//second dropdown
$("#level2").change(function () {
  var $dropdown = $(this);
  var key = $dropdown.val();

  function generateDropdown(vals) {
    $level3.append("<option selected value=\"base\">Please select one</option>");
    $.each(vals, function (index, value) {
      $level3.append("<option value=\"" + value.yo + "\">" + value.TITLE + "</option>");
    });
  };

  switch (key) {
    case 'first-child':
    $.getJSON("recursos/json/ajsonfile.json", function (data) {
      $level3.empty();

      vals = data.first_option.children.child01.children;
      generateDropdown(vals)

      $("#second-table").removeClass("d-none");
      $("#second-table").addClass("d-block");

      info = data.first_option.children.child01;
      $(".second-title").innerHTML(info.TITLE);
      generateTable2(info);
    });
    break

    //second, third, fourth child options etc.

    case 'base':
    $level3.empty();
    vals = ['Please select one'];
    $level3.append("<option>" + vals + "</option>");
    $("#cedula2").removeClass("d-block");
    $("#cedula2").addClass("d-none");
    console.log(vals);
    break
  }
});

//third dropdown
$("#level3").change(function () {
  // I think you get the gist
});

是否可以进行一些迭代，以便我可以在一个循环中填充所有下拉列表？