时间戳

首页 > 解决方案 > 为什么a的值使用 cloneNode() 时元素重置？我正在创建一个表单，用户可以在其中添加字段。按下按钮并添加更多输入字段。克隆字段的 id 附加了一个数字，以将其与原始字段区分开来。当克隆的元素被附加时，原始字段中元素中的选定选项将重置为第一个选项。我编写了一些简化的代码来演示相同的行为： HTML: <!DOCTYPE html> <head> <script src="cloneTest.js" crossorigin="anonymous">&

问题描述

标签： javascripthtml-selectclonenode

解决方案

问题是，当您克隆一个节点时，您实际上是使用它的 HTML 标记并从该标记中创建一个新元素。选定<option>对象的任何 HTML 属性都不会因被选定而更改，除非您明确地这样做（通过为选定对象<option>提供一个selected属性，并确保没有其他<option>标签具有该属性）。

const origSelect = document.querySelector('select');
const options = [...origSelect.options];
origSelect.addEventListener('change', () => {
  options.forEach(option => option.removeAttribute('selected'));
  options[origSelect.selectedIndex].setAttribute('selected', '');
});

function cloneIt() {
  let newFields = document.getElementById('clonedFields');
  let cloneThis = document.getElementById('cloneThis');
  let clonedNode = cloneThis.cloneNode(true);
  clonedNode.querySelector('select').value = origSelect.value;
  newFields.parentNode.appendChild(clonedNode);
}
<div id="cloneParent">
  <div id="cloneThis">
    <select id="cloneTestSelect">
      <option value="Option1">Option1</option>
      <option value="Option2">Option2</option>
      <option value="Option3">Option3</option>
      <option value="Option4">Option4</option>
    </select>
    <label for="cloneTestText">Text Input: </label>
    <input type="text" id="cloneTestText">
    <label for="cloneTestNumber">Number Input: </label>
    <input type="text" id="cloneTestNum">
  </div>
</div>
<br>
<h1>Cloned fields: </h1>
<br>
<div id="clonedFields"></div>
<button onclick="cloneIt()">Clone inputs</button>

虽然您可以这样做，但简单地检索 的当前值<select>并将新的选择标签设置为原始选择的值会更容易：

const origSelect = document.querySelector('select');

function cloneIt() {
  let newFields = document.getElementById('clonedFields');
  let cloneThis = document.getElementById('cloneThis');
  let clonedNode = cloneThis.cloneNode(true);
  clonedNode.querySelector('select').value = origSelect.value;
  newFields.parentNode.appendChild(clonedNode);
}
<div id="cloneParent">
  <div id="cloneThis">
    <select id="cloneTestSelect">
      <option value="Option1">Option1</option>
      <option value="Option2">Option2</option>
      <option value="Option3">Option3</option>
      <option value="Option4">Option4</option>
    </select>
    <label for="cloneTestText">Text Input: </label>
    <input type="text" id="cloneTestText">
    <label for="cloneTestNumber">Number Input: </label>
    <input type="text" id="cloneTestNum">
  </div>
</div>
<br>
<h1>Cloned fields: </h1>
<br>
<div id="clonedFields"></div>
<button onclick="cloneIt()">Clone inputs</button>

推荐阅读