Как я могу динамически создать раскрывающееся меню в JavaScript?

Question

Первоначально, я сгенерировал dropdown menu:

Я добавил более подробную информацию о том, как я хочу создать выпадающее меню.

 <div class="well sidebar-nav"> 
      <img src="building.gif" style="display: block;margin-left:auto; margin-right:auto;max-width:100%; max-height:100%;" /> 
      <div class="dropdown" style="padding-left: 20px; padding-top:5px;"> 
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="display: block;margin-left:auto; margin-right:auto;"> 
        Select A Building 
        <span class=" caret"> 
        </span> 
       </button> 

       <ul id="myul" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></ul> 

      </div> 
     </div> 
    </div><!--/span2--> 

Теперь, я написал следующий код:

var buildingList=[ 
      { 
      "BuildingName": "Adler Journalism and Mass Communication Building", 
      "BuildingNumber": "0456" 
      }, 
      { 
      "BuildingName": "Art Building", 
      "BuildingNumber": "0021" 
      } 
    ]; 

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="display: block;margin-left:auto; margin-right:auto;"> 
         Select A Building 
         <span class=" caret"> 
         </span> 
        </button> 
    <ul id="myul" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    </ul> 

    <script type="text/javascript"> 
     var out = ""; 
     var ul = document.getElementById("myul"); 
     for (i = 0; i < buildingList.length; i++) { 
       out = ' <li role="presentation"><a role="menuitem" tabindex="-1" href=" ' + buildingList[i].BuildingName + ' "> ' + buildingList[i].BuildingName + ' </a></li>'; 
       var li = document.createElement("li"); 
       var t = document.createTextNode(out); 
       li.appendChild(t); 
       ul.appendChild(li); 
    } 
    </script> 

Я хотел бы генерировать dropdown список динамически на основе buildingList массива с помощью javascript, вы можете помочь мне?

Заранее благодарен!

Answer 1

Вы можете разделить массив и добавить элементы в раскрывающийся список. Я думаю, это поможет вам.

https://css-tricks.com/dynamic-dropdowns/

Answer 2

Вы можете попробовать что-то вроде этого.

$.each(buildingList, function (index, value) { 
    $(".dropdown-menu").append($("<li>").text(value.BuildingName)); 
}) 

Я создал скрипку, чтобы вы могли видеть.

https://jsfiddle.net/bcub7wsL/1/

Я изменил скрипку так, что он просто использует простой Javascript

http://jsfiddle.net/ha80r95b/