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)。

为什么“选择”和“输入”的克隆行为不同？

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 属性。

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

然后在回调函数中，通过使用将属性selected设置为该对象

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

运行下面的sn-p。

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

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

克隆<select> 不会不复制<option>s 上的value= 属性。

发生这种情况是因为更改属性会更改表单控件的状态，但不会更改元素的 HTML selected 属性的值。
您可以在W3 specs 阅读更多相关信息。

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