使用 Bootstrap 动态填充下拉菜单答案

【问题标题】：Dynamic population of dropdown menu with Bootstrap使用 Bootstrap 动态填充下拉菜单
【发布时间】：2014-07-17 01:49:48
【问题描述】：

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

谢谢！

【问题讨论】：

+1 - 您现在可以上传图片以进一步澄清问题或提供有关您的页面发生的情况的更多信息。
谢谢！ :-) 我已经进行了编辑。
HTML 和 CSS 会很棒，因为在我看来，这更像是一个格式化 (CSS) 问题，而不是 Javascript。这就是我的 +1 给我带来的：P
如果您使用的是 chrome，您可以右键单击它并选择检查元素以查看“当前”html 是什么样的。这向您显示了动态生成的 html，它在通过视图源中不可见。如果您右键单击“站点选择”按钮，它会显示 html。
尝试提供一个 jsfiddle 示例来重现错误。也许你会想通的。还要比较这两种情况的现有 html，这可以帮助您调试它。您可以在 Chrome 和 Firefox 中执行此操作。

标签： javascript html twitter-bootstrap

【解决方案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);
          }

【讨论】：