用JavaScript创建和复制/复制选择/选项列表菜单 [英] creating and copy/duplicating a select/option list menu with JavaScript
问题描述
我有一个 select 列表菜单：
< label> ;
< option value =1> 1< / option>
< option value =2> 2< / option>
< option value =3> 3< / option>
< / select>
< / label>
我想用动态的确切信息复制它。我可以通过创建选择元素并从第一个复制。 （我也生成一个表格行，我的 innerHTML 选择选择将会打开，但并不重要）：
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 =金额+ 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）;
传递给<$ c的 true
另外，我假设你想要 .cloneNode 使它成为一个深层克隆（所有后代）。
counter 的 current 值，而不是可能不同的将来值。因此，我使用新的函数调用来确定当前值的范围。 现在无论 counter 的值是什么时候这段代码运行时都会传递给 sellcalculate（）。
I have a select list menu:
<label>
<select name="select" id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
I want to duplicate it with the exact informations dynamically. I can do that by creating a select element and copying the innerHTML from the first select. (I also generate a table row which my select is going to be on, but it's not important):
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;
It works fine on Firefox, but IE just creates the select but wouldn't copy the options.
My second question is: how can I add an onchange event to the created element?
selectt.onchange = function(){sellcalculate(counter)};
This doesn't seems to work.
here is the compelete function after edit function and solving the ie problem :
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);
}
I can't test in IE right now, but try using .cloneNode() instead to create the new element.
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);
The true argument passed to .cloneNode makes it a deep clone (all descendants).
Also, I assumed you want the onchange handler to reference the current value of counter instead of a potentially different future value. As such, I scoped the current value using a new function invocation.
Now whatever the value of counter is when this code runs will be the value passed to sellcalculate().
这篇关于用JavaScript创建和复制/复制选择/选项列表菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
