别让表单“失忆”：HTML 下拉框默认选中的正确姿势

做前端开发时，你有没有遇到过这种尴尬场景？用户辛辛苦苦填好了表单，点了提交却没成功，页面刷新后，所有选择清空，连那个精心设置的省份下拉框都回到了第一行。这种体验简直像被泼了盆冷水。其实，很多下拉框无法保持状态，是因为对 selected 属性的理解只停留在表面。今天咱们就聊聊怎么让 HTML 的 <select> 真正记住用户的“心意”。

静态页面的基础写法

最经典的做法其实不用太复杂。在编写 HTML 结构时，直接给 <option> 标签加上 selected 属性即可。这个属性是布尔值，只要有它存在，浏览器就会默认选中这一项。

<select name="city">
  <option value="bj">北京</option>
  <option value="sh" selected>上海</option>
  <option value="gz">广州</option>
</select>

看到这段代码是不是觉得眼熟？关键在于 value 和显示文本的对应。很多时候新手会盯着“上海”这两个字，却忽略了背后存储的 value="sh"。如果后端逻辑是通过 value 来校验的，那你在静态页面里一定要确保加在正确的选项上。

动态数据下的“翻车”现场

静态写死固然简单，但现在的业务大多是动态的。比如从接口拿到的数据列表里，默认城市可能是后端根据用户 IP 解析出来的。这时候硬编码就不行了。

如果在页面加载后才通过 JavaScript 渲染出 <option>，再想去设置 selected 就得小心时机。最常见的做法是直接操作 DOM 对象的 value 属性。假设你已经获取到了目标城市的编码 targetCity：

const selectEl = document.querySelector('#citySelect');
// 只有当 value 存在于选项中时，赋值才会生效
selectEl.value = targetCity; 

这里有个隐蔽的坑：如果你先尝试设置 value，但此时 DOM 里的 <option> 还没生成完毕，或者生成的 value 与目标不匹配，浏览器就会默默忽略这个操作，导致下拉框依旧为空或回退到默认状态。所以，务必确认选项已插入完成，再执行赋值动作。如果是异步请求回来的数据，记得把设置默认值的逻辑放在回调函数内部，而不是写在请求后面。

那个该死的占位符怎么办

很多表单要求第一个选项是个提示语，比如“请选择省份”，用户不能选它，但又希望初始状态下它显示出来。

这时候单纯用 selected 不行，因为选上提示语就意味着用户没做选择。标准解法是组合拳：给第一个选项同时加上 selected 和 disabled。

<option value="" selected disabled>请选择省份</option>

这样，页面加载时用户看到提示信息，且无法提交这个无效值。一旦用户点击下拉菜单，选择了真实有效的城市，后续的验证逻辑就能正常工作。这个细节在很多旧教程里容易被忽略，但在实际交互中至关重要。

细节决定留存率

下拉框看起来只是一个小组件，但它直接影响用户对表单完整性的判断。无论是静态写死还是动态赋值，核心逻辑都是确保 value 的精准匹配以及执行时机的准确性。

别为了省那几行代码让用户反复重填。花点时间调试好这个默认状态，用户体验的提升是肉眼可见的。毕竟，一个善解人意的界面，应该能替用户记着刚才做过的事。