如何隐藏select下拉框首个选项？Safari中hidden属性无效问题

问题描述 #

需求：隐藏select控件中的“Day”选项，仅当未选中任何有效选项时显示该文本作为占位提示。

初始代码：

<select id="day" name="day">
    <option disabled selected>Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

尝试给首个option添加hidden属性后，在Safari浏览器中无效，修改后的代码片段：

<option disabled selected hidden>Day</option>

解决方案 #

方案1：CSS兼容方案（推荐）

Safari对hidden属性在option标签上的支持存在缺陷，但可以通过CSS的display: none实现需求，同时保留默认选中的占位文本显示。

完整代码：

<select id="day" name="day">
    <option disabled selected class="select-placeholder">Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<style>
    /* 隐藏下拉列表中的占位选项 */
    .select-placeholder {
        display: none;
    }
</style>

说明：通过CSS将占位选项设置为不显示，下拉展开时不会出现“Day”选项；而select控件默认选中该选项时，仍会正常显示“Day”文本作为占位提示，完全符合需求。

方案2：JavaScript辅助控制

如果需要处理更复杂的交互场景，可以用JS动态控制选项的显示状态：

<select id="day" name="day">
    <option disabled selected id="day-placeholder">Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<script>
    const selectEl = document.getElementById('day');
    const placeholderOpt = document.getElementById('day-placeholder');

    // 初始隐藏占位选项
    placeholderOpt.style.display = 'none';

    // 失去焦点时，若未选中有效选项则重置为占位状态
    selectEl.addEventListener('blur', () => {
        if (!selectEl.value) {
            selectEl.selectedIndex = 0;
        }
    });
</script>

说明：初始通过JS隐藏占位选项，当用户未选择任何值就离开控件时，自动重置选中占位选项，确保显示“Day”文本。

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