本文介绍通过 JavaScript 动态控制 <select> 中禁用的默认提示选项（如“Day”）的显示状态：仅在未选值时可见，一旦用户选择有效选项即自动隐藏，兼容 Safari 等主流浏览器。
本文介绍通过 javascript 动态控制 `
在 HTML 表单中，常使用 <option disabled selected> 作为下拉框的占位提示（如 “Day”、“Select an option”），但该选项默认始终可见——即使用户已选择有效值，它仍占据视觉空间，影响界面整洁性。原生 hidden 属性对 <option> 元素支持不佳（尤其在 Safari 中被忽略），因此需借助 JavaScript 实现动态显隐。
核心思路是：监听 <select> 的 change 事件，检测当前选中值；若值非空（即用户选择了有效 <option>），则将禁用的提示项设为 display: none；否则恢复显示。
以下是完整实现方案：
<select id="day" name="day" onchange="handleDayChange(this)">
<option disabled selected>Day</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<script>
function handleDayChange(selectElement) {
const selectedValue = selectElement.value;
// 定位唯一 disabled 的 option（即提示项）
const dayOption = selectElement.querySelector('option:disabled');
if (selectedValue !== '') {
dayOption.style.display = 'none';
} else {
dayOption.style.display = ''; // 重置为默认样式
}
}
</script>✅ 注意事项：
- querySelector('option:disabled') 精准定位提示项，避免硬编码索引；
- 使用 style.display = '' 而非 'block'，确保恢复浏览器默认渲染行为；
- Safari 对 <option> 的 CSS 支持有限，但 display: none 在现代 Safari（v15.4+）中已稳定生效；
- 若需支持更早 Safari 版本或追求无 JS 方案，可改用 <datalist> 或自定义下拉组件替代原生 <select>。
该方法轻量、无需第三方库，兼顾语义化与用户体验，是优化表单提示体验的实用实践。
