克隆div并修改内部select元素ID的技术求助

咱们可以在克隆完成后，针对新生成的.minor容器里的select元素逐个调整ID，这里分两种常见场景给出方案：

场景1：按克隆后的顺序生成form2_q1、form2_q2... #

如果只需要按克隆元素的位置依次编号，直接用索引来生成新ID就行：

// 克隆.major下的.minor容器（true表示深克隆，包含子元素）
const clonedMinor = document.querySelector('.major .minor').cloneNode(true);
// 将克隆的元素添加到页面目标位置（这里示例添加到body末尾，你可按需修改）
document.body.appendChild(clonedMinor);

// 遍历克隆后的所有select元素
clonedMinor.querySelectorAll('select').forEach((select, index) => {
  // index从0开始，+1得到1、2...的序号，拼接成目标ID格式
  select.id = `form2_q${index + 1}`;
});

场景2：基于原ID修改前缀（比如原ID是form1_q1，改成form2_q1） #

如果原select的ID已经是form1_qX这类格式，直接替换前缀会更稳妥：

const clonedMinor = document.querySelector('.major .minor').cloneNode(true);
document.body.appendChild(clonedMinor);

clonedMinor.querySelectorAll('select').forEach(select => {
  const originalId = select.id;
  // 把原ID里的"form1"替换成"form2"，保留后面的编号部分
  select.id = originalId.replace('form1', 'form2');
});

额外提醒 #

要是克隆的元素里还有和select关联的label标签，记得同步修改label的for属性，不然点击标签无法对应到新的select：

clonedMinor.querySelectorAll('label').forEach(label => {
  const originalFor = label.getAttribute('for');
  label.setAttribute('for', originalFor.replace('form1', 'form2'));
});

内容的提问来源于stack exchange，提问作者João Gomes