Создать новое раскрывающееся меню с javascript

Question

Я пытаюсь создать выпадающий список после того, как я выберу вариант в исходном раскрывающемся списке.

Это HTML-код:

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

Это 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); 
} 

Режим отладки не показывает мне ошибки.

Answer 1

Это потому, что вы пытаетесь добавить свой код в «исходный выбор»: посмотрите на id вашего select.

Вы должны добавить div тег с id="select-container" и удалить его из «оригинала выберите»

Вот рабочий фрагмент кода:

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

Положите ваш выбор в div с идентификатором select-container. Конечно, дайте вашему выбору другой идентификатор. Тогда ваш код должен работать. Это потому, что вы пытаетесь добавить новый select к оригиналу в своем HTML.

https://jsfiddle.net/b248a4k1/