下拉菜单 select 第一个子项的处理技巧
<style>.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
.artBox select { background: lightblue; box-shadow: 2px 2px 6px gray; padding: 4px 10px; margin-right: 12px; }
.artBox output { color: blue; font-size: 16px; }
.tGreen { color: green; }
.tBlue { color: blue; }
</style>
<div class="artBox">
<p>在需要紧凑布局的应用场景，下拉菜单 <code>select</code> 控件的第一个子项可能需要扮演额外的角色——提示下拉菜单的功能。这通常有两种设置技巧：</p>
<h2>方法一：设置第一个子菜单为 disabled</h2>
<p>这是推荐的做法。我们直接上例子：</p>
<pre><code class="hCode"><select>
<option value="0" <span class="tBlue">disabled selected</span>>选择水果品类</option>
<option value="1">梨子</option>
<option value="2">苹果</option>
<option value="3">木菠萝</option>
<option value="4">酸杨桃</option>
<option value="5">苦李</option>
</select>
</code></pre>
<p>效果演示：</p>
<div class="prevBox"></div>
<p>这里，<code>select</code> 的第一个 option 子项不是待选子菜单，它的作用是在页面初始化时提醒用户进行选择，相当于标题。该项使用了一个 <code>disabled</code>属性，表示它被禁用，另一个属性 <code>selected</code> 表示初始化页面时被选中。后续的项目仅使用 <code>value</code> 属性以标明子菜单索引留待JS处理时识别或做判断依据。</p>
<p>这种处理技巧兼容性好，也符合业界规范。缺点是，下拉菜单展开时头一个子项虽然处于不可用状态，但它仍然可见，在视觉上有那么一点点“碍眼”的感觉。</p>
<h2>方法二：使用CSS设置第一个子菜单为不可见</h2>
<p>参考如下代码：</p>
<pre><code class="hCode"><select>
<option value="0" <span class="tBlue">style="display: none;"</span>>选择水果品类</option>
<option value="1">梨子</option>
<option value="2">苹果</option>
<option value="3">木菠萝</option>
<option value="4">酸杨桃</option>
<option value="5">苦李</option>
</select>
</code></pre>
<p>效果：</p>
<div class="prevBox"></div>
<p>这个方法被认为是“极客技巧”，下拉菜单展开后的效果清爽利落，不再出现待选子项集群中不该有的候选项目，视觉效果极佳。缺点是：可能不兼容老旧浏览器、屏幕阅读器可能无法正确处理隐藏的选项、（据说）隐藏选项可能导致用户困惑。</p>
<p>上述两种方法，笔者更倾向于选择第二种——如果可以自主选择的话。</p>
<h2>JS简单操作下拉菜单实例</h2>
<p>最后我们以第二种技巧为例，简单演示一下JS如何操作下拉菜单。下面示例的要点：获取用户选择结果并复原下拉菜单为初始状态：</p>
<pre><code class="hCode"><select id="mySelect" <span class="tBlue">onchange="getSelected();"</span>>
<optionvalue="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() {
<span class="tGreen">// 显示选择结果</span>
Result.innerText = '你选择了：' + mySelect.options.text;
<span class="tGreen">// 复原下拉菜单为初始状态</span>
mySelect.value = '0';
}
</script>
</code></pre>
<div class="prevBox"></div>
<p>【结语】下拉菜单 select 是 Web 页与用户交互的一个重要标签组件，其下由子标签 option 组成待选菜单子项。待选子菜单的第一项如何处理是一门技巧，特别是当需要下拉菜单第一项充当类标题的时候。本文给出了两个解决方案，并演示了 JS 对 select 的简单操作。</p>
</div>
<script>
const hCodes = document.querySelectorAll('.hCode');
const prevBoxes = document.querySelectorAll('.prevBox');
hCodes.forEach((c, k) => {
prevBoxes.innerHTML = c.innerText;
});
function getSelected() {
// 显示选择结果
Result.innerText = '你选择了：' + mySelect.options.text;
// 复原下拉菜单为初始状态
mySelect.value = '0';
}
</script> 黑黑老师傍晚嚎！谢谢老师详细讲解，学习了。{:4_190:} 下拉菜单里也这么多细节问题。感谢黑黑介绍和讲解，学习了{:4_187:} 第一个子项不出现的确很清爽{:4_204:} 红影 发表于 2026-4-21 21:37
第一个子项不出现的确很清爽
原生 select 和其它 form 里的组件一样，有很多缺陷，所以，有人专门封装了 select2 之类的第三方库 红影 发表于 2026-4-21 21:35
下拉菜单里也这么多细节问题。感谢黑黑介绍和讲解，学习了
几乎所有的东东都会有自己的细节 梦江南 发表于 2026-4-21 17:33
黑黑老师傍晚嚎！谢谢老师详细讲解，学习了。
{:4_190:} 马黑黑 发表于 2026-4-21 23:10
原生 select 和其它 form 里的组件一样，有很多缺陷，所以，有人专门封装了 select2 之类的第三方库
这样用起来就更方便了。 马黑黑 发表于 2026-4-21 23:11
几乎所有的东东都会有自己的细节
是的，只是这些细节之前完全不知道呢。 红影 发表于 2026-4-22 22:45
是的，只是这些细节之前完全不知道呢。
不知道正常 红影 发表于 2026-4-22 22:45
这样用起来就更方便了。
但是不希望总是依赖第三方库 马黑黑 发表于 2026-4-23 17:52
不知道正常
可以在帖子里好好学习一下了{:4_187:} 马黑黑 发表于 2026-4-23 17:52
但是不希望总是依赖第三方库
为了方便，肯定要有所依赖呢。 红影 发表于 2026-4-29 16:39
为了方便，肯定要有所依赖呢。
一般的诉求是不重复造轮子，但是这不是铁律。我个人的主张是，能不依赖尽量不依赖。 红影 发表于 2026-4-29 16:38
可以在帖子里好好学习一下了
学习学习再学习 马黑黑 发表于 2026-4-29 19:47
一般的诉求是不重复造轮子，但是这不是铁律。我个人的主张是，能不依赖尽量不依赖。
使用和重复造轮子不是一回事吧，对于不会的人，肯定是有轮子就用啊{:4_173:} 马黑黑 发表于 2026-4-29 19:48
学习学习再学习
这个是必须的{:4_205:} 红影 发表于 2026-4-30 19:18
这个是必须的
{:4_181:} 红影 发表于 2026-4-30 19:18
使用和重复造轮子不是一回事吧，对于不会的人，肯定是有轮子就用啊
所以说是尽可能，不是绝对。
就像 react，现在慢慢被抛弃，转而用原生的东东 马黑黑 发表于 2026-4-30 21:09
所以说是尽可能，不是绝对。
就像 react，现在慢慢被抛弃，转而用原生的东东
哈，都不知道这东西，就已经被升级换代了啊{:4_173:}
页:
[1]
2