Javascript克隆节点未将所有值从克隆复制到新对象

Question

<div class="container">
  <select class="btn" name="item">
    <option>Alpha</option>
    <option>Beta</option>
    <option>Gamma</option>
    <option>Theta</option>
  </select>
  <input type="text" class="desc" name="desc">
</div>

在此示例中，默认情况下在“选择”下拉列表中选择的元素为“Alpha”。我想用值克隆整个节点。如果我在下拉列表中选择不同的值并在输入框中输入一些文本，然后克隆该节点，则只克隆文本框值。新对象中“选择”下拉列表的值仍为默认值（Alpha）。

为什么“select”与“input”的克隆行为不同？

var parent = document.querySelector(".container");
var button = parent.querySelector(".btn");
var textbox = parent.querySelector(".desc");

  > textbox.value
  < "some random text"
  > button.value
  < "Gamma"

var cloned = parent.cloneNode(true);
var childButton = cloned.querySelector(".btn");
var childTextbox = cloned.querySelector(".desc");

  > childTextbox.value
  < "some random text"
  > childButton.value
  < "Alpha"

Answer 1

当您更改选择时，选择的状态将存储在浏览器中，并且克隆的节点将永远不会包含由浏览器更改和/或存储的对象/元素的状态。

但对于input，它会存储为属性value的值并进行克隆。

克隆具有所选值的节点

您应该检测更改事件并向其添加selected属性。

即为select事件添加change的事件监听器。

然后在回调函数中，使用

将属性selected设置为该对象

selectElement.options[selectElement.selectedIndex].setAttribute("selected","");

运行下面的代码段。

从列表中选择任何值，然后在文本框中键入内容并单击“克隆”按钮。

var parent = document.querySelector(".container");
var button = parent.querySelector(".btn");
var textbox = parent.querySelector(".desc");
console.log(button.value);
console.log(textbox.value);
function update(val){
  val.options[val.selectedIndex].setAttribute("selected","");
  
}


function clone(){
  var cloned = parent.cloneNode(true);
  document.querySelector(".container-2").appendChild(cloned);
  var childButton = cloned.querySelector(".btn");
  var childTextbox = cloned.querySelector(".desc");
  console.log(button.value);
  console.log(textbox.value);
}

<div class="container">
  <select class="btn" name="item" onchange="update(this);">
    <option>Alpha</option>
    <option>Beta</option>
    <option>Gamma</option>
    <option>Theta</option>
  </select>
  <input type="text" class="desc" name="desc">
</div>
<button onclick="clone();">Clone</button>
<div class="container-2"></div>

Answer 2

我使用getElementsByClass（）方法来获取有趣的元素。然后通过for循环我添加一个onchange事件来克隆容器。注意在函数的末尾我将值pf的父选择元素分配给克隆选择榆树。

var parent = document.getElementsByClassName("container");
var button = document.getElementsByClassName("btn");


for(var i=0;i<button.length;i++){
button[i].onchange=function(){  
var cloned = parent[0].cloneNode(true);  
 console.log(cloned);
 document.body.appendChild(cloned);
  cloned.childNodes[1].value=this.value;
};
}

<div class="container">
  <select class="btn" name="item">
    <option>Alpha</option>
    <option>Beta</option>
    <option>Gamma</option>
    <option>Theta</option>
  </select>
  <input type="text" class="desc" name="desc">
</div>

Answer 3

克隆 [,1] [,2] [,3] [,4] [,5] [,6] [1,] 11 16 17 28 23 26 [2,] 12 15 18 21 24 27 [3,] 13 16 19 22 25 28 不复制<select>上的value=媒体资源。

这是因为更改属性会更改表单控件的状态，但不会更改元素的HTML selected属性的值。
您可以在W3 specs中了解有关它的更多信息。

在您的示例中，如果您检查<option>节点的值，您将看到只有该元素具有正确的选定值且没有任何克隆。