[英]Dynamic population of dropdown menu with Bootstrap
我正在使用Bootstrap来处理布局自定义。 它使用下拉菜单,我试图填充来自其他地方的实时信息。
现在我在html上这样做:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Tijuana</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Site Select<span class="caret"></span></a>
<ul class="dropdown-menu" id="projectSelectorDropdown">
</ul>
</li>
</ul>
在Javascript上:
var list = document.getElementById("projectSelectorDropdown");
for (var i = 0; i < rows; i++){
var opt = table.getValue(i, 0);
var li = document.createElement("li");
var text = document.createTextNode(opt);
text.href = "#";
li.appendChild(text);
// alert("option " + opt);
list.appendChild(li);
}
在HTML部分末尾的Bootstrap脚本之前调用该脚本:
<script>queryProjects();</script>
<script src="js/bootstrap.min.js"></script>
结果如下所示:
信息在那里,但悬停时的阴影和项目上的链接不再起作用。 我希望它看起来像下拉列表的信息在HTML文件上硬编码时的样子:
是否有直接的方法使下拉行为就像直接从HTML中填充一样?
谢谢!
感谢您的所有反馈。 下拉列表不起作用,因为<li>
元素必须在里面有一个<a>
元素,我错过了那个部分。 唯一的变化是在javascript部分:
var list = document.getElementById("projectSelectorDropdown");
for (var i = 0; i < rows; i++){
var opt = table.getValue(i, 0);
var li = document.createElement("li");
var link = document.createElement("a");
var text = document.createTextNode(opt);
link.appendChild(text);
link.href = "#";
li.appendChild(link);
list.appendChild(li);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.