如何在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> 

我想生成動態基於使用javascript的buildingList陣列上的dropdown列表，你可以幫我嗎？

在此先感謝！

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/