使用JS动态填充HTML元素问题：重复点击下拉菜单异常

AI 小北

2026-8-18

问题根源

重复点击后选项叠加，核心原因是你没清空第二个下拉菜单的原有内容，直接用模板字面量生成的HTML追加到了原有内容后面。比如错误代码逻辑可能是这样：

// 错误示例：直接追加，导致旧内容残留
secondSelect.innerHTML += `<option value="${item}">${item}</option>`;

首次点击时下拉菜单为空，显示正常；重复点击时新选项会叠在旧选项后面，就出现了文本重复的情况。

解决方法

方案1：先清空再填充

在生成新选项前，先清空下拉菜单的innerHTML，再插入模板字面量生成的完整选项字符串：

// 清空原有内容
secondSelect.innerHTML = '';
// 用map生成所有选项的HTML字符串，再拼接成完整内容
const optionHtml = items.map(item => `<option value="${item}">${item}</option>`).join('');
// 插入新内容
secondSelect.innerHTML = optionHtml;

注意：map返回的数组直接转字符串会带逗号，必须用join('')拼接成完整HTML。

方案2：用DOM元素替换子节点（更安全）

如果不想用HTML字符串拼接（避免潜在XSS风险），可以直接创建DOM元素，用replaceChildren一次性替换所有子节点：

// 生成所有option元素
const optionElements = items.map(item => {
  const option = document.createElement('option');
  option.value = item;
  option.textContent = item;
  return option;
});
// 直接替换下拉菜单的所有子节点
secondSelect.replaceChildren(...optionElements);