解决原生JS克隆下拉框无法保留更新后选中值的问题

问题根源 #

cloneNode(true) 只会复制元素的初始DOM结构与属性，但用户修改后的表单元素状态（如下拉框选中值、输入框内容）属于动态运行时属性，不会被自动克隆。这就是修改下拉框后，新克隆行仍使用初始选中值的原因。

修复后的代码 #

假设按钮ID为addRowBtn、行容器ID为rowContainer，修改后的原生JS代码如下：

document.getElementById('addRowBtn').addEventListener('click', function() {
  const container = document.getElementById('rowContainer');
  const lastRow = container.lastElementChild;
  if (!lastRow) return; // 避免容器为空时触发错误

  const newRow = lastRow.cloneNode(true);
  
  // 同步原行与克隆行的表单元素当前值
  const originalFields = lastRow.querySelectorAll('select, input[type="number"]');
  const clonedFields = newRow.querySelectorAll('select, input[type="number"]');

  originalFields.forEach((field, index) => {
    clonedFields[index].value = field.value;
  });

  container.appendChild(newRow);
});

关键逻辑说明 #

1. 克隆行后，主动遍历原行和克隆行的目标表单元素（select与number类型input）
2. 将原元素的当前value值直接赋值给克隆元素，确保动态修改的状态被完整继承
3. 增加空行判断，避免容器无内容时出现报错

如果行内还有其他类型表单元素（如文本框、复选框），只需扩展querySelectorAll的选择器，同步对应属性即可（比如复选框同步checked属性）。

内容的提问来源于stack exchange，提问作者Learner