使用Bootstrap的下拉菜单的动态填充

Question

我正在使用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中填充一样？

谢谢！

Answer 1

感谢您的所有反馈。下拉列表不起作用，因为<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);
          }