Question

我正在创建一个表单，用户可以在其中添加字段。按下按钮，将添加更多输入字段。克隆字段的ID后面附加了一个数字，以区别于原始字段。

添加克隆的元素后，原始字段中元素中的选定选项将重置为第一个选项。

我写了一些简化的代码来演示相同的行为：

HTML：

<!DOCTYPE html>
<head>
    <script src="cloneTest.js" crossorigin="anonymous"></script>
</head>
<body>
    <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>

</body>

Javascript：

function cloneIt(){
    let newFields = document.getElementById('clonedFields');
    let cloneThis = document.getElementById('cloneThis');
    let clonedNode = cloneThis.cloneNode(true);   

    newFields.parentNode.appendChild(clonedNode);    
}

输入元素保留其值，但是select被重置。除了将选择值存储在单独的变量中之外，是否可以保留选择值？还是阻止它重置？

CodePen链接：https://codepen.io/whisperV/pen/rXqGNM

Answer 1

问题是，当您克隆节点时，您可以有效地获取其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>的当前值，并将新的select标记设置为原始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>

为什么在使用cloneNode（）时会重置<select>元素的值？

1 个答案: