Erstellen Sie ein neues Dropdown mit Javascript

Question

Ich versuche, ein Dropdown zu erstellen, nachdem ich eine Option in einem Dropdown-Menü ausgewählt habe.

Dies ist der HTML-Code:

<br> 
<select id ="select-container" onchange="addSelect('select-container');"> 
    <option>test1</option> 
    <option>test2</option> 
    <option>test3</option> 
</select> 
<br> 

Dies ist Javascript.

function categorygenerate() { 
    //for testing purposes 
    var categoryarray = new Array(), 
     i; 
    for (i = 0; i < 3; i++) { 
     categoryarray[i] = Math.random(); 
    } 
    return categoryarray; 
} 

function addSelect(divname) { 
    var newDiv = document.createElement('div'); 
    var html = '<select>', 
     dates = categorygenerate(), 
     i; 
    for (i = 0; i < dates.length; i++) { 
     html += "<option value='" + dates[i] + "'>" + dates[i] + "</option>"; 
    } 
    html += '</select>'; 
    newDiv.innerHTML = html; 
    document.getElementById(divname).appendChild(newDiv); 
    console.log($("#" + divname).html()); 
    console.log(newDiv); 
} 

Der Debugger-Modus zeigt mir keinen Fehler.

Answer 1

Es ist, weil Sie versuchen, Ihren Code in die "Originalauswahl" anzuhängen: sehen Sie sich die id Ihrer select an.

Sie haben einen div-Tag mit den id="select-container" hinzufügen und aus dem entfernen "Original wählen"

Hier ist ein Arbeits Schnipsel:

function categorygenerate() { 
 
    //for testing purposes 
 
    var categoryarray = new Array(), 
 
     i; 
 
    for (i = 0; i < 3; i++) { 
 
     categoryarray[i] = Math.random(); 
 
    } 
 
    return categoryarray; 
 
} 
 

 
function addSelect(divname) { 
 
    var newDiv = document.createElement('div'); 
 
    var html = '<select>', 
 
     dates = categorygenerate(), 
 
     i; 
 
    for (i = 0; i < dates.length; i++) { 
 
     html += "<option value='" + dates[i] + "'>" + dates[i] + "</option>"; 
 
    } 
 
    html += '</select>'; 
 
    newDiv.innerHTML = html; 
 
    document.getElementById(divname).appendChild(newDiv); 
 
    console.log($("#" + divname).html()); 
 
    console.log(newDiv); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br> 
 
<select onchange="addSelect('select-container');"> 
 
    <option>test1</option> 
 
    <option>test2</option> 
 
    <option>test3</option> 
 
</select> 
 
<br> 
 
<div id="select-container"></div>

Answer 2

Setzen Sie Ihre Auswahl in ein div mit der ID select-container. Geben Sie Ihrer Wahl natürlich eine andere ID. Dann sollte dein Code funktionieren. Das liegt daran, dass Sie versuchen, ein neues select an das Original in Ihrem HTML-Code anzuhängen.

https://jsfiddle.net/b248a4k1/