Bootstrap Dropdown mit Javascript generiert

Question

Mit GetelementbyID und eine for-Schleife hatte ich gehofft, in der Lage zu sein, einen Dropdown-Button zu erstellen und automatisch mit Einträgen aus einem Array zu füllen. Leider scheint es nicht zu funktionieren, da der html für das Dropdown sich schließt, bevor ich es erzähle.

Dies ist mein Code

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>'; 
     } 

Wie Sie sehe ich das Drop-down vor der Schleife zu öffnen, dann verwende ich die Schleife alle Optionen aufzulisten, die innerhalb es sein sollte, und am Ende habe ich es zu schließen.

Sobald ich es zwar laufen lasse, bekomme ich nur ein gebrochenes Dropdown (Beispiel kann hier http://creativiii.com/test/test.html gesehen werden). Nach der Überprüfung der HTML mit Chrom habe ich festgestellt, dass, aus irgendeinem Grund, </ul></span> geschrieben werden, direkt bevor die Schleife beginnt, dass am Ende, wo ich will, bricht das Dropdown vollständig.

Wie kann ich das beheben? In dem von mir bereitgestellten Link habe ich auch ein Beispiel dafür angegeben, wie das Dropdown aussehen sollte.

Answer 1

Das Problem hier passiert, wenn Sie das unvollständige HTML ändern, korrigiert der Browser es, wie es denkt, dass es richtig ist, so dass Sie mit Menü aus dem übergeordneten enden. Das ist die temporäre Variable für das Halten von Elementen vor dem Einfügen, wie im Beispiel unten.

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>