title: Create drop-down menus dynamically using a json data file
body: <p>I am on process of creating an web application which has a Hierarchy panel, where I facilitate user to drill down up-to a certain extent using drop-down menus. I use a <code>JSON</code> file to create all these select menus and their options.</p>
  
  <p>The drop-down menus that I want to create as follow.</p>
  
  <ul>
  <li>Delivery Center</li>
  <li>Program</li>
  <li>Account</li>
  <li>Project</li>
  <li>ERP</li>
  </ul>
  
  <p>How can I generate all the drop-down menus including it's data. Please tell me an optimal way to resolve this matter. jQuery or JavaScript preferred.</p>
  
  <p><a href="https://drive.google.com/file/d/0Bx37qvKU4PoUVEdzZnBES2p2aUU/edit?usp=sharing" rel="nofollow">You can find the <code>JSON</code> file with the message in this document.</a></p>
  
  <p>Following is the way I was trying to do it. But to create each and every menu i need to write a separate function.</p>
  
  <pre><code>//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('&lt;option  value="' + hJson[index].definitionID + '"&gt; ' + hJson[index].definitionName + '&lt;/option&gt;');
        }
      }
    });
    $("#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 = "&lt;label for='selectmenu1' data-mini='true'&gt; " + y + " &lt;/label&gt;";
    dropdownlist += "&lt;div data-role='fieldcontain'&gt;";
    dropdownlist += "&lt;select data-native-menu='true' onChange='detect(" + i + ")' name='selectmenu1' id='selectmenu1' data-mini='true'&gt;";
    dropdownlist += "&lt;/select&gt;";
    dropdownlist += "&lt;/div&gt;";
  
    $("#dmenu").html(dropdownlist);
    $('#dmenu').trigger('create');
    for (i = 0; i &lt; treeJson.levelChildren.length; i++) {
      $("#selectmenu1").append('&lt;option  value="' + treeJson.levelChildren[i].levelName + '"&gt; ' + treeJson.levelChildren[i].levelName + '&lt;/option&gt;');
    }
  }
  
  function program(treeJson, hindex) {
    var y = treeJson.levelChildren[hindex].levelChildren[hindex].levelType;
    var x = treeJson.levelChildren[hindex];
    alert(treeJson.levelChildren[hindex].levelChildren.length);
    dropdownlist = "&lt;label for='selectmenu2' data-mini='true'&gt; " + y + " &lt;/label&gt;";
    dropdownlist += "&lt;div data-role='fieldcontain'&gt;";
    dropdownlist += "&lt;select data-native-menu='true' onChange='detect(" + i + ")' name='selectmenu2' id='selectmenu2' data-mini='true'&gt;";
    dropdownlist += "&lt;/select&gt;";
    dropdownlist += "&lt;/div&gt;";
  
    $("#dmenu2").html(dropdownlist);
    $('#dmenu2').trigger('create');
    for (i = 0; i &lt; treeJson.levelChildren.length; i++) {
      for (j = 0; j &lt; treeJson.levelChildren[i].levelChildren.length; j++) {
        alert(j);
        $("#selectmenu2").append('&lt;option  value="' + treeJson.levelChildren[i].levelChildren[j].levelName + '"&gt; ' + treeJson.levelChildren[i].levelChildren[j].levelName + '&lt;/option&gt;');
      }
    }
  }
  </code></pre>
  
  <p>JSON File used.... i have attached the json file in the above link</p>
  
  <pre><code>{
    "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":[
  
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
  </code></pre>