Javascript 使用json数据文件动态创建下拉菜单

我正在创建一个web应用程序，它有一个层次面板，在这个面板中，我使用下拉菜单方便用户在一定程度上向下钻取。我使用JSON文件创建所有这些选择菜单及其选项

我要创建的下拉菜单如下所示

配送中心 程序 账户 项目 企业资源计划 如何生成所有下拉菜单，包括其数据。请告诉我解决这件事的最佳方法。最好是jQuery或JavaScript

下面是我尝试的方法。但要创建每个菜单，我需要编写一个单独的函数

//load the json Files in the page load
$("#mobile-page").on("pageinit", function () {
  $.getJSON("assets/json/HierarchyDef.json", function (hJson) {
    for (var index in hJson) {
      if (hJson.hasOwnProperty(index)) {
        $("#selectmenu0").append('<option  value="' + hJson[index].definitionID + '"> ' + hJson[index].definitionName + '</option>');
      }
    }
  });
  $("#selectmenu0").selectmenu('refresh');
  createMenus();
});

function createMenus() {
  $.getJSON("assets/json/OrganizationalHierarchy.json", function (treeJson) {
    var hindex = 0;
    deliveryCenter(treeJson, hindex);
    program(treeJson, hindex);
  });
}

function deliveryCenter(treeJson, hindex) {
  var y = treeJson.levelChildren[hindex].levelType;
  var x = treeJson.levelChildren[hindex];
  alert(treeJson.levelChildren.length);
  dropdownlist = "<label for='selectmenu1' data-mini='true'> " + y + " </label>";
  dropdownlist += "<div data-role='fieldcontain'>";
  dropdownlist += "<select data-native-menu='true' onChange='detect(" + i + ")' name='selectmenu1' id='selectmenu1' data-mini='true'>";
  dropdownlist += "</select>";
  dropdownlist += "</div>";

  $("#dmenu").html(dropdownlist);
  $('#dmenu').trigger('create');
  for (i = 0; i < treeJson.levelChildren.length; i++) {
    $("#selectmenu1").append('<option  value="' + treeJson.levelChildren[i].levelName + '"> ' + treeJson.levelChildren[i].levelName + '</option>');
  }
}

function program(treeJson, hindex) {
  var y = treeJson.levelChildren[hindex].levelChildren[hindex].levelType;
  var x = treeJson.levelChildren[hindex];
  alert(treeJson.levelChildren[hindex].levelChildren.length);
  dropdownlist = "<label for='selectmenu2' data-mini='true'> " + y + " </label>";
  dropdownlist += "<div data-role='fieldcontain'>";
  dropdownlist += "<select data-native-menu='true' onChange='detect(" + i + ")' name='selectmenu2' id='selectmenu2' data-mini='true'>";
  dropdownlist += "</select>";
  dropdownlist += "</div>";

  $("#dmenu2").html(dropdownlist);
  $('#dmenu2').trigger('create');
  for (i = 0; i < treeJson.levelChildren.length; i++) {
    for (j = 0; j < treeJson.levelChildren[i].levelChildren.length; j++) {
      alert(j);
      $("#selectmenu2").append('<option  value="' + treeJson.levelChildren[i].levelChildren[j].levelName + '"> ' + treeJson.levelChildren[i].levelChildren[j].levelName + '</option>');
    }
  }
}

---

如果没有看到JSON数据，就不可能编写一个精确的脚本，但是如果您控制JSON数据，那么第1步就是以最好的方式组织它。例如：

Object ->
    Menu 1 ->
        Item 1 -> data
        Item 3 -> data
    Menu 2 ->
        Item 1 -> data
        Item 2 -> data
        Item 3 -> data

然后，在循环数据以构建菜单时，您基本上会执行以下操作：

Loop Over JSON data {
    html += '<ul>';
    Loop Over Menu Items {
        html += '<li>';
        html += //OTHER HTML
        html += '</li>';
    }
    html += '</ul>';
}

---

我希望您能接受。

使用胡须或把手比编写DOM代码或字符串HTML要干净得多。我认为第一步是重新组织JSON数据。我正在尝试完成我的解决方案。当我完成后，我会发布它。非常感谢Victor，，感谢你的努力，：我想创建5个不同的下拉菜单-配送中心-程序-帐户-项目-ERPi我使用5个函数来完成此操作，但我知道这不是更好的方法，请给我一个最佳的方法，我将按照我的第一个代码块所示组织JSON数据。按菜单组织它，然后可以使用一个函数按菜单循环JSON数据。

Loop Over JSON data {
    html += '<ul>';
    Loop Over Menu Items {
        html += '<li>';
        html += //OTHER HTML
        html += '</li>';
    }
    html += '</ul>';
}