下拉菜单 select 第一个子项的处理技巧

马黑黑

在需要紧凑布局的应用场景，下拉菜单 select 控件的第一个子项可能需要扮演额外的角色——提示下拉菜单的功能。这通常有两种设置技巧：

方法一：设置第一个子菜单为 disabled

这是推荐的做法。我们直接上例子：

<select>
    <option value="0" disabled selected>选择水果品类</option>
    <option value="1">梨子</option>
    <option value="2">苹果</option>
    <option value="3">木菠萝</option>
    <option value="4">酸杨桃</option>
    <option value="5">苦李</option>
</select>

效果演示：

这里，select 的第一个 option 子项不是待选子菜单，它的作用是在页面初始化时提醒用户进行选择，相当于标题。该项使用了一个 disabled属性，表示它被禁用，另一个属性 selected 表示初始化页面时被选中。后续的项目仅使用 value 属性以标明子菜单索引留待JS处理时识别或做判断依据。

这种处理技巧兼容性好，也符合业界规范。缺点是，下拉菜单展开时头一个子项虽然处于不可用状态，但它仍然可见，在视觉上有那么一点点“碍眼”的感觉。

方法二：使用CSS设置第一个子菜单为不可见

参考如下代码：

<select>
    <option value="0" style="display: none;">选择水果品类</option>
    <option value="1">梨子</option>
    <option value="2">苹果</option>
    <option value="3">木菠萝</option>
    <option value="4">酸杨桃</option>
    <option value="5">苦李</option>
</select>

效果：

这个方法被认为是“极客技巧”，下拉菜单展开后的效果清爽利落，不再出现待选子项集群中不该有的候选项目，视觉效果极佳。缺点是：可能不兼容老旧浏览器、屏幕阅读器可能无法正确处理隐藏的选项、（据说）隐藏选项可能导致用户困惑。

上述两种方法，笔者更倾向于选择第二种——如果可以自主选择的话。

JS简单操作下拉菜单实例

最后我们以第二种技巧为例，简单演示一下JS如何操作下拉菜单。下面示例的要点：获取用户选择结果并复原下拉菜单为初始状态：

<select id="mySelect" onchange="getSelected();">
    <option  value="0">选择水果品类</option>
    <option value="1">梨子</option>
    <option value="2">苹果</option>
    <option value="3">木菠萝</option>
    <option value="4">酸杨桃</option>
    <option value="5">苦李</option>
</select>
<output id="Result">选择结果</output>

<script>
    const mySelect = document.getElementById('mySelect');

    function getSelected() {
        // 显示选择结果
        Result.innerText = '你选择了：' + mySelect.options[mySelect.value].text;
        // 复原下拉菜单为初始状态
        mySelect.value = '0';
    }
</script>

【结语】下拉菜单 select 是 Web 页与用户交互的一个重要标签组件，其下由子标签 option 组成待选菜单子项。待选子菜单的第一项如何处理是一门技巧，特别是当需要下拉菜单第一项充当类标题的时候。本文给出了两个解决方案，并演示了 JS 对 select 的简单操作。

梦江南

黑黑老师傍晚嚎！谢谢老师详细讲解，学习了。