[英]How can I dynamically create an dropdown menu list in JavaScript?
Initially, I generated a dropdown menu
by: 最初,我通过以下方式生成了一个dropdown menu
:
I have added more details about how I want to make a 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-->
Now, I wrote the following code: 现在,我编写了以下代码:
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>
I would like to generate an dropdown
list dynamically based on the buildingList
array using javascript
, can you help me out? 我想使用javascript
基于buildingList
数组动态生成一个dropdown
列表,您能帮帮我吗?
Thanks in advance! 提前致谢!
You can try something like this. 您可以尝试这样。
$.each(buildingList, function (index, value) {
$(".dropdown-menu").append($("<li>").text(value.BuildingName));
})
I created a fiddle so that you can see. 我创建了一个小提琴,以便您可以看到。
https://jsfiddle.net/bcub7wsL/1/ https://jsfiddle.net/bcub7wsL/1/
I changed the fiddle so that it just uses plain Javascript 我更改了小提琴,使其仅使用纯Javascript
You can split the array and append the elements to drop down list. 您可以拆分数组并将元素附加到下拉列表中。 I think this will help you. 我认为这会对您有所帮助。
https://css-tricks.com/dynamic-dropdowns/ https://css-tricks.com/dynamic-dropdowns/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.