Comment créer dynamiquement une liste de menus déroulants en JavaScript?

Question

Initialement, j'ai généré un dropdown menu par:

J'ai ajouté plus de détails sur comment je veux faire un menu déroulant.

 <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--> 

Maintenant, j'ai écrit le code suivant:

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> 

Je voudrais générer une liste dropdown dynamiquement en fonction du tableau buildingList en utilisant javascript, pouvez-vous me aider?

Merci d'avance!

Answer 1

Vous pouvez diviser la matrice et ajouter les éléments à la liste déroulante. Je pense que cela va vous aider.

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

Answer 2

Vous pouvez essayer quelque chose comme ça.

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

J'ai créé un violon pour que vous puissiez voir.

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

J'ai changé le violon pour qu'il utilise tout simplement Javascript

http://jsfiddle.net/ha80r95b/