Javascript 带引导的下拉菜单的动态填充

我正在使用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);
  }

var list=document.getElementById（“projectSelectorDropdown”）；
对于（var i=0；i

在HTML部分末尾的引导脚本之前调用该脚本：

<script>queryProjects();</script>
<script src="js/bootstrap.min.js"></script>

queryProjects（）；

结果如下所示：

信息在那里，但是悬停时的阴影和项目上的链接不再起作用。我希望它看起来像是在HTML文件中硬编码下拉列表信息时的样子：

有没有一种直接的方法可以让下拉列表看起来像是直接从HTML填充的

---

谢谢

感谢您的反馈。下拉列表不起作用，因为

元素必须包含

元素，而我缺少该部分。唯一的变化是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);
          }

var list=document.getElementById（“projectSelectorDropdown”）；
对于（var i=0；i

+1-您现在可以上传图片以进一步澄清问题，或提供有关页面发生了什么的更多信息。谢谢！：-）我已经做了edit.HTML和CSS，对我来说，这看起来更像是一个格式化（CSS）问题，而不是Javascript。这就是my+1带给我的：如果您使用的是chrome，您可以右键单击它并选择inspect元素来查看“当前”html是什么样子的。这将向您显示动态生成的html，它在通过视图源中不可见。如果右键单击“Site Select”按钮，它将显示html。请尝试提供一个JSFIDLE示例来重现错误。也许你会明白的。还可以比较两种情况下的现有html，这有助于您进行调试。您可以在Chrome和Firefox中实现这一点。