使用 display: none 隐藏包含 的容器不会丢失用户已选值，关键在于避免重复设置空字符串或内联样式覆盖，而应通过 removeProperty('display') 恢复默认渲染行为。
使用 `display: none` 隐藏包含 `
在 Web 表单开发中，常需动态切换表单区域（如多步骤表单、折叠面板），而其中包含 <select></select> 下拉控件。一个常见误区是：当用 element.style.display = "" 清空样式时，浏览器可能回退到 CSS 级联中的其他规则（如全局 .section-container { display: none }），导致元素意外不可见；更严重的是，若逻辑中误触发元素重建或 innerHTML 重写，才会真正丢失选中状态——但仅靠 display: none / display: block 切换 DOM 元素的可见性，绝不会重置 <select></select> 的 value 或 selectedIndex。
✅ 正确做法是：
- 隐藏时统一设为
display: none； - 显示时移除
display内联样式，让其自然继承 CSS 中定义的默认显示方式（如block），而非设为空字符串""（该写法语义模糊，易受样式层干扰）。
以下是优化后的核心函数：
function showSectionContainer(sectionId) {
const sectionContainers = document.querySelectorAll('.section-container');
sectionContainers.forEach(container => {
if (container.id === sectionId) {
container.style.removeProperty('display'); // ✅ 恢复默认显示行为
} else {
container.style.display = 'none'; // ✅ 安全隐藏
}
});
}⚠️ 注意事项：
- 不要使用
container.style.display = ""—— 它不等价于“恢复默认”，而是清空内联值，若存在外部 CSS 规则（如.section-container { display: none; }），元素仍将隐藏； - 无需手动保存/恢复
<select></select>的value或遍历<option></option>设置selected属性——DOM 元素保留在内存中，其内部状态（包括用户选择）完整保留； -
hidden属性虽语义更清晰（<div hidden>），但与 <code>display: none在表单数据提交、焦点管理、可访问性方面行为一致，且性能差异可忽略（现代浏览器对display: none的渲染优化极佳，DOM 节点数增长不会导致“变慢”）； - 若页面存在大量
.section-container（数百个以上），建议结合documentFragment或虚拟滚动做进一步优化，但单纯切换display不构成性能瓶颈。
最后，确保表单提交逻辑能正确读取所有可见/隐藏区域内的字段值（浏览器默认会提交所有 <input>/<select></select>/<textarea></textarea>，无论是否 display: none）：
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
for (let [name, value] of formData.entries()) {
console.log(`${name}: ${value}`); // ✅ 自动包含隐藏 select 的当前选中值
}
});总结：只要不销毁、不重建、不重写 DOM 节点，display: none 是安全、高效、语义明确的隐藏方案——它保留完整状态，无需额外状态管理。
