为何动态添加option会覆盖select的硬编码占位选项？

你遇到的这种现象，大概率是以下几种情况导致的：

• 代码中存在隐藏的清空操作：这是最常见的原因。虽然你认为只用了appendChild追加元素，但可能在执行appendChild之前，代码里不小心做了清空select内容的操作，比如：

  • 调用了select.innerHTML = ''清空所有内容
  • 设置了select.options.length = 0重置选项集合
  • 循环移除了select的所有子元素（比如while(select.firstChild) select.removeChild(select.firstChild)）
    这些操作会直接删掉硬编码的占位option，后续appendChild自然只会显示动态添加的选项。而如果是动态生成占位option，你可能是在清空后再生成并添加，所以能正常显示。

• 硬编码option的DOM结构异常：如果你的HTML结构有问题，比如硬编码的option被错误包裹在<optgroup>标签内，或者标签未正确闭合，可能导致浏览器解析DOM时没有正确识别这个占位option。此时你以为它存在，但实际DOM中并没有，动态添加选项后自然看不到占位项。

• 极少数浏览器特殊行为：在某些旧版浏览器中，当select设置了required属性，且硬编码占位option同时设置了selected和disabled，动态添加选项时可能触发浏览器的自动调整逻辑，但这种情况非常罕见，且动态生成的占位option也会出现相同问题，所以可能性极低。

1. 在执行appendChild之前，在控制台打印select.options.length或者Array.from(select.children)，确认硬编码的占位option是否存在于DOM中。
2. 检查代码中所有操作该select元素的逻辑，看是否有不经意的清空或移除子元素的代码。
3. 查看页面的DOM结构（浏览器F12开发者工具的Elements面板），确认硬编码的option是否被正确解析。

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