使用JavaScript创建和复制选择/选项列表菜单

creating and copy/duplicating a select/option list menu with JavaScript

本文关键字：选项 列表 菜单 选择 复制 JavaScript 创建 使用      更新时间：2023-09-26

我有一个select列表菜单：

<label>
    <select name="select" id="select1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</label>

我想用精确的信息动态地复制它。我可以通过创建一个select元素并从第一个select复制innerHTML来实现这一点。（我还生成了一个select将要打开的表行，但这并不重要）：

var selectt = document.createElement("select");
selectt.setAttribute("name", "select"+counter);
selectt.setAttribute("id", "select"+counter);
selectt.onchange = function() {sellcalculate(counter); 
cell3.appendChild(selectt);
document.getElementById("select"+counter).innerHTML=document.getElementById("select1").innerHTML;

它在Firefox上运行良好，但IE只是创建了选择，但不会复制选项。

我的第二个问题是：如何将onchange事件添加到创建的元素中？

 selectt.onchange = function(){sellcalculate(counter)};

这似乎不起作用。

这是在编辑功能和解决ie问题之后的强制功能：

function addRow(tableID) {
    var counter = document.getElementById('rowcounter').value;
    counter++;
    document.getElementById('rowcounter').value = counter;
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var cell = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.id = "amount" + counter;
    element2.onchange = function () {
        sellcalculate(counter)
    };
    cell2.appendChild(element2);
    var cell3 = row.insertCell(2);
    var selectt = document.createElement("select");
    selectt = document.getElementById("select1").cloneNode(true);
    selectt.setAttribute("name", "select" + counter);
    selectt.setAttribute("id", "select" + counter);
    selectt.onchange = (function (cntr) {
        return function () {
            sellcalculate(cntr);
        };
    })(counter);
    cell3.appendChild(selectt);
}

我现在无法在IE中进行测试，但请尝试使用.cloneNode()来创建新元素。

var selectt = document.getElementById("select1").cloneNode(true);
selectt.setAttribute("name", "select"+counter);
selectt.setAttribute("id", "select"+counter);
selectt.onchange = (function( cntr ) {
    return function() { sellcalculate(cntr); };
})( counter );
cell3.appendChild(selectt);

传递给.cloneNode的true参数使其成为深度克隆（所有子代）。

此外，我假设您希望onchange处理程序引用counter的当前值，而不是潜在的不同未来值。因此，我使用一个新的函数调用来确定当前值的范围。

现在，无论这个代码运行时counter的值是什么，都将是传递给sellcalculate()的值。

您可以像这样使用jQuery.clone（）：

$('#select1').clone().attr({'id':'select'+counter, 'name':'select'+counter}).appendTo('cell3Selector');

此处为测试页面。

相关文章：