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的{{1}}。

您必须使用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);
}

Answer 2

将您的选择放入ID为select-container的div中。当然，请选择其他ID。然后你的代码应该工作。这是因为您尝试将新的select附加到HTML中的原始版本。

https://jsfiddle.net/b248a4k1/

使用javascript创建一个新的下拉列表

2 个答案: