我正在创建一个具有Hierarchy面板的Web应用程序，我可以使用下拉菜单帮助用户在一定程度上向下钻取。我使用JSON文件来创建所有这些选择菜单及其选项。
我想要创建的下拉菜单如下。
如何生成所有下拉菜单，包括它的数据。请告诉我解决此问题的最佳方法。 jQuery或JavaScript首选。
You can find the JSON file with the message in this document.
以下是我尝试这样做的方式。但要创建每个菜单，我需要编写一个单独的函数。
//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文件附加到上面的链接
{
"levelType":"Root",
"levelId":null,
"levelName":"RootElement",
"levelChildren":[
{
"levelType":"Delivery Center ",
"levelId":null,
"levelName":"CLR",
"levelChildren":[
{
"levelType":"Program",
"levelId":null,
"levelName":"Europe",
"levelChildren":[
{
"levelType":"Account",
"levelId":null,
"levelName":"BaC",
"levelChildren":[
{
"levelType":"Project",
"levelId":null,
"levelName":"BTR200",
"levelChildren":[
{
"levelType":"ERP",
"levelId":null,
"levelName":"BTWLM00",
"levelChildren":[
{
"levelType":"ModuleName",
"levelId":"9779",
"levelName":"bbapdler ",
"levelChildren":[
]
},
{
"levelType":"ModuleName",
"levelId":"9780",
"levelName":"cmnlib ",
"levelChildren":[
]
}
]
}
]
},
{
"levelType":"Project",
"levelId":null,
"levelName":"B190",
"levelChildren":[
{
"levelType":"ERP",
"levelId":null,
"levelName":"B190",
"levelChildren":[
{
"levelType":"ModuleName",
"levelId":"9875",
"levelName":"bgging ",
"levelChildren":[
]
},
{
"levelType":"ModuleName",
"levelId":"9876",
"levelName":"rbmaient ",
"levelChildren":[
]
},
{
"levelType":"ModuleName",
"levelId":"9877",
"levelName":"seril ",
"levelChildren":[
]
}
]
}
]
}
]
}
]
}
]
},
{
"levelType":"Delivery Center ",
"levelId":null,
"levelName":"CHE",
"levelChildren":[
{
"levelType":"Program",
"levelId":null,
"levelName":"DivV",
"levelChildren":[
{
"levelType":"Account",
"levelId":null,
"levelName":"Synted",
"levelChildren":[
{
"levelType":"Project",
"levelId":null,
"levelName":"Synce",
"levelChildren":[
{
"levelType":"ERP",
"levelId":null,
"levelName":"Syenance",
"levelChildren":[
{
"levelType":"ModuleName",
"levelId":"10104",
"levelName":"JCCommon ",
"levelChildren":[
]
},
{
"levelType":"ModuleName",
"levelId":"10105",
"levelName":"JCDriver ",
"levelChildren":[
]
},
{
"levelType":"ModuleName",
"levelId":"10106",
"levelName":"JCManager ",
"levelChildren":[
]
}
]
}
]
}
]
}
]
},
{
"levelType":"Program",
"levelId":null,
"levelName":"MHices",
"levelChildren":[
{
"levelType":"Account",
"levelId":null,
"levelName":"Meve",
"levelChildren":[
{
"levelType":"Project",
"levelId":null,
"levelName":"Mckntive",
"levelChildren":[
{
"levelType":"ERP",
"levelId":null,
"levelName":"Mcntive",
"levelChildren":[
{
"levelType":"ModuleName",
"levelId":"3912",
"levelName":"Logiwork ",
"levelChildren":[
]
},
{
"levelType":"ModuleName",
"levelId":"3913",
"levelName":"Registry ",
"levelChildren":[
]
}
]
}
]
}
]
}
]
}
]
}
]
}
答案 0 :(得分：0)
如果没有看到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>';
}
我希望你能得到conecept。