javascript - 使用 javascript 生成的 Bootstrap 下拉列表

Question

通过使用 getelementbyID 和 for 循环，我希望能够创建一个下拉按钮并自动用数组中的条目填充它。不幸的是，它似乎无法正常工作，因为下拉菜单的 html 在我告诉它之前自行关闭。

这是我的代码

var contacts = [
    "John",
    "John",
    "John",
    "John",
    "John",
    "John",
    "John",
]; 
        function phone() {
                document.getElementById("optionscontainer").innerHTML = document.getElementById("optionscontainer").innerHTML + '<span class="dropdown"><a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Phone <span class="caret"></span></a><ul class="dropdown-menu">';
            for (i = 0; i < contacts.length; i++) {
                document.getElementById("optionscontainer").innerHTML = document.getElementById("optionscontainer").innerHTML + '<li><a onclick="call(' + i + ')" href="#">' + contacts[i] + '</a></li>';
                if (i == contacts.length) {}
            }
                document.getElementById("optionscontainer").innerHTML = document.getElementById("optionscontainer").innerHTML + '</ul></span>';
        }

如您所见，我在循环之前打开下拉列表，然后使用循环列出其中应包含的所有选项，最后关闭它。

不过，一旦我运行它，我就会得到一个损坏的下拉列表(示例可以在这里看到 http://creativiii.com/test/test.html )。在用 chrome 检查 html 之后，我注意到，出于某种原因，</ul></span>是在循环开始之前写的，而不是在我想要的末尾写的，完全打破了下拉菜单。

我该如何解决这个问题？在我提供的链接中，我还发布了一个下拉菜单的外观示例。

Answer 1

当您修改不完整的 html 时，就会出现这里的问题，浏览器会按照它认为正确的方式对其进行更正，因此您最终会得到父菜单之外的菜单。这就是在插入步骤之前保存元素的临时变量，就像示例中的 down 一样。

var contacts = [
  "John",
  "John",
  "John",
  "John",
  "John",
  "John",
  "John",
];

function phone() {
  var menuHtml = '<span class="dropdown"><a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Phone <span class="caret"></span></a><ul class="dropdown-menu">';
  for (i = 0; i < contacts.length; i++) {
    menuHtml += '<li><a onclick="call(' + i + ')" href="#">' + contacts[i] + '</a></li>';
  }
  menuHtml += '</ul></span>';
  document.getElementById("optionscontainer").innerHTML = menuHtml;
}

phone();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="optionscontainer"></div>