我正在创建一个表单，用户可以在其中添加字段。按下按钮即可添加更多输入字段。克隆字段的 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);
}
输入元素保留其值，但选择会重置。除了将选择值存储在单独的变量中之外，是否有办法保留它？或者阻止它被重置？
代码笔链接：https://codepen.io/whisperV/pen/rXqGNM https://codepen.io/whisperV/pen/rXqGNM
问题在于，当您克隆节点时，您实际上会获取其 HTML 标记并从该标记中创建一个新元素。一个选定的<option>它的任何 HTML 属性都不会因被选择而改变，除非您明确地这样做（通过给出选定的<option> a 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>
当你could这样做，简单地检索当前值会更容易<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
