使用 JavaScript 創建和復制/復制選擇/選項列表菜單

Question

我有一個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 只創建 select 但不會復制選項。

我的第二個問題是：如何向創建的元素添加 onchange 事件？

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

這似乎不起作用。

這是編輯 function 並解決 ie 問題后的完整 function：

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);
}

Answer 1

我現在無法在 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的當前值，而不是可能不同的未來值。 因此，我使用新的 function 調用來確定當前值的范圍。

現在無論代碼運行時counter的值是什么，都將是傳遞給sellcalculate()的值。

Answer 2

您可以像這樣使用jQuery.clone() ：

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

測試頁面在這里。