javascript - 使用 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。

您必须添加带有 id="select-container" 的 div 标记，并将其从“原始选择”中删除

这是一个工作片段:

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>