基础实现：用HTML原生标签搞定默认提示
其实HTML本身就藏着解决select占位符的“钥匙”，只是很多人没把几个属性用对。去年带实习生做项目时，发现他写的下拉框是这样的：
请选择
选项一
选项二
结果用户真的会选“请选择”提交，导致后台收到无效数据。这就是典型的“只做了视觉提示，没做功能限制”。后来我让他加了两个属性，问题立刻解决了。
正确的基础操作分三步
：
disabled和selected，同时把value设为空值（value=""）； 完整代码长这样：
请选择行业
互联网/科技
金融/银行
教育/培训
你可能会问：为啥要加这么多属性？我来一个个说清楚。selected让页面加载时默认显示这个提示；disabled阻止用户手动选择它（点下拉框时这个选项会变灰，选不了）；value=""最关键——如果用户没选其他选项就提交，表单会传空值，后台就能判断“用户未选择”，而不是传“请选择”这串文字。
我之前帮一个餐饮客户改外卖下单页时就吃过亏。他们原来的地址选择框没设value=""，结果有15%的订单传过来的是“请选择区域”，客服还得一个个打电话确认，后来加了这个属性，无效订单直接降到2%以下。
为了让你更直观看到效果，我做了个对比表，看看不同写法的区别：
| 写法 | 默认显示 | 能否被用户选择 | 提交时的值 | 用户体验 |
|---|---|---|---|---|
| 只写文本无属性 | 请选择行业 | 能 | 请选择行业 | 差（易提交无效值） |
| 加selected+disabled | 请选择行业 | 不能 | 空值 | 好（明确引导） |
表：不同select占位符写法的效果对比
这个方法几乎兼容所有浏览器，从IE8到最新的Chrome都支持，而且完全用HTML原生标签，不用写额外代码。不过它有个小缺点：当用户选择了其他选项后，下拉框里这个提示选项还是会显示（只是变灰）。如果你想让它“消失”，就得用到CSS和JavaScript了。
进阶优化：CSS+JS让占位符更智能
如果你的网站追求更精致的交互（比如电商表单、会员注册页），基础方法可能不够用。比如用户选了“互联网/科技”后，下拉框里还留着“请选择行业”的灰色选项，视觉上有点冗余。这时候可以用CSS隐藏默认提示，或者用JS动态控制显示状态，让体验更丝滑。
用CSS让占位符“选完就藏”
去年给一个设计工作室做官网时，他们的设计师特别较真，觉得“选完还留着提示文字不美观”。我们当时用了个CSS小技巧：让默认提示选项在用户选择其他选项后“消失”。原理很简单：利用:checked伪类和兄弟选择器，当select有选中项时，隐藏默认option。
代码分两步：
class="placeholder"； / 隐藏默认提示选项 /
select option.placeholder {
display: none;
}
/ 当select没有选中真实选项时，显示提示 /
select:not(:valid) option.placeholder {
display: block;
}
这里的:not(:valid)是关键——只有当select的值为空（即用户没选真实选项）时，才显示占位符；一旦选了有value的选项，占位符就隐藏了。不过这个方法有个前提：你的select必须设置required属性（表单必填），因为:valid伪类依赖表单验证状态。如果表单允许“选或不选”，这个方法就不适用了，得换JS方案。
用JavaScript实现动态交互
如果你需要更灵活的控制（比如根据用户操作显示不同提示，或者非必填的选择框），JavaScript是更好的选择。上个月帮朋友的在线问卷系统改表单时，他们需要“如果用户选了‘其他’，就显示‘请填写具体内容’的提示”，这时候JS就能派上用场。
核心思路是监听select的change事件，根据选中的值动态切换提示状态。比如：
代码示例：
请选择职业
设计师
开发者
其他
const jobSelect = document.getElementById('job');
// 页面加载时设置初始提示
jobSelect.options[0].text = '请选择职业';
jobSelect.addEventListener('change', function() {
const selectedValue = this.value;
// 如果选了“其他”，提示文字变“请填写具体内容”
if (selectedValue === 'other') {
this.options[0].text = '请填写具体内容';
this.options[0].selected = true;
} else if (selectedValue === '') {
// 如果选回空值，恢复原始提示
this.options[0].text = '请选择职业';
}
});
这个方法的好处是完全自定义——你可以根据业务需求改提示文字，甚至联动其他表单元素（比如选了“其他”后显示输入框）。我当时帮朋友做问卷时，还加了个小细节：当用户选“其他”后，自动聚焦到下面的输入框，用户反馈“像有人在旁边引导一样，很贴心”。
不管用哪种方法，记得做完后自己测试一下：选不同选项、刷新页面、不选直接提交，看看提示是否正常显示、表单数据是否正确。你可以按F12打开开发者工具，在Console面板里输入document.querySelector('select').value，回车就能看到当前选中的值，确认是否符合预期。
其实select占位符看似小问题，却直接影响用户填写表单的意愿。我见过太多网站因为“下拉框没提示”，导致用户不知道该选啥，直接关掉页面。希望今天分享的方法能帮你解决这个小痛点——如果你试了这些方法，或者有其他更好的技巧，欢迎在评论区告诉我，咱们一起把表单做得更友好！
你知道吗？HTML里的select选择框其实跟input输入框不一样，它原生就不支持placeholder属性。就像你写input的时候，可以直接加个placeholder=”请输入姓名”，浏览器马上就能显示灰色的提示文字，但select标签你要是也这么写，比如，页面上根本不会有任何提示——我刚开始学前端的时候就踩过这个坑，对着代码看了半天，还以为是自己拼写错了，后来查MDN文档才发现，select标签从设计的时候就没这个属性，得换个思路来实现默认提示文字。
那到底该咋弄呢？其实行业里最常用的办法就是用普通的option标签来模拟占位符。不过光写个请选择可不行，我之前帮朋友改他公司官网的表单时就见过这种情况，他直接放了个没加任何属性的option，结果用户真的会选“请选择”然后提交，后台收到一堆“请选择”这种无效数据。正确的做法是给这个提示option加上disabled和selected属性，再把value设为空值，比如请选择行业。加了disabled，用户点下拉框的时候这个选项会变灰，根本选不了；加了selected，页面加载时默认就显示这个提示；value设为空值更关键，这样用户没选其他选项就提交时，表单传的是空值，后台一眼就能判断“用户没选”，而不是收到“请选择”这串文字，亲测这个方法在所有浏览器里都管用，兼容性特别好。
HTML的select标签原生支持placeholder属性吗？
不支持。HTML原生的select标签不像input标签那样有专门的placeholder属性，无法直接通过placeholder设置默认提示文字。需要通过在select中添加一个特殊的option标签来模拟占位符效果，这也是目前最常用的实现方式。
为什么设置默认提示时必须给option添加disabled属性？
添加disabled属性是为了阻止用户手动选择默认提示选项。如果不添加disabled，用户可能会误选“请选择”这类提示文字并提交表单，导致后台收到无效数据。添加后，该选项会在下拉列表中显示为灰色，无法被用户选中，只能作为初始展示的提示。
为什么要将默认提示option的value设为空值（value=””）？
将value设为空值是为了让后台能准确判断用户是否选择了有效选项。当用户未选择其他选项时，表单提交的value为空，后台可直接识别为“用户未选择”；如果不设空值，可能会提交“请选择”这串文字，导致后台无法区分用户是未选择还是误选了提示文字。
用CSS隐藏默认提示的方法在所有浏览器都能生效吗？
大部分现代浏览器（如Chrome、Firefox、Edge）都支持，但旧版浏览器（如IE11及以下）可能存在兼容性问题。因为CSS隐藏方法依赖:valid、:not()等伪类，而这些伪类在旧版IE中支持不完善。如果需要兼容旧浏览器， 优先使用基础的HTML方法，或搭配JavaScript控制。
如果select不是必填项，还能使用默认提示吗？
可以。如果select是非必填项（即不需要设置required属性）， 使用基础HTML方法：保留默认提示option并添加disabled selected属性，只是用户可以选择不修改默认提示直接提交表单（此时表单会提交空值）！如果希望非必填时也能隐藏默认提示，可改用JavaScript监听选择状态，动态控制提示显示与否。
