HTML select的autocomplete属性？增强下拉菜单自动填充-html教程-PHP中文网

html select 元素不支持 autocomplete 属性，浏览器会忽略该设置；其值不会被自动填充，刷新后总恢复默认项，因自动填充机制仅适用于 input、textarea 等可输入控件。

html select的autocomplete属性？增强下拉菜单自动填充

HTML `select` 元素根本不支持 `autocomplete` 属性

直接说结论：autocomplete 是为 input、textarea 和 button 等可编辑/可提交控件设计的，select 不在规范支持范围内。浏览器会忽略你写在 select 上的 autocomplete，哪怕加了也完全没效果。

常见错误现象：表单提交后，浏览器记住了 input 的值，但下拉选中的 option 从不被自动填充；用户刷新页面或回退时，select 总是回到默认项（或空值），不会恢复上次选择。

原因很简单：浏览器的自动填充机制依赖 name/value 映射和输入焦点行为，而 select 的交互本质是“选择”而非“输入”，其 value 不经过键盘输入流，也不触发 input 事件，所以不参与 autocomplete 生命周期。

真正能起作用的替代方案：用 `input` + 自定义下拉模拟 `select`

如果确实需要自动填充（比如地址省市区、职业类型等结构化选项），必须放弃原生 select，改用带 autocomplete 的 input 配合 JS 下拉菜单（即“combobox”模式）。

关键点：

input 必须有合法的 autocomplete 值，如 autocomplete="country"、autocomplete="organization"，参考 WHATWG Autofill spec
下拉列表需用 div + ul/li 实现，不能用 select；选中时更新 input.value 并同步隐藏下拉
必须监听 input 的 focus、keydown（上下键）、click（选项点击）事件，否则无法替代原生体验
注意 ARIA 属性：给 input 加 role="combobox" aria-expanded="true/false"，给下拉容器加 role="listbox"，每个选项加 role="option"，否则屏幕阅读器不可用

退而求其次：用 `select` + `localStorage` 或表单恢复逻辑

如果改造成本高、又必须用原生 select，只能自己补自动填充逻辑。浏览器不帮你，那就自己记。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

实操建议：

在 select 的 change 事件里，把 select.value 存进 localStorage，key 可用 select.name 或 select.id
页面加载后（DOMContentLoaded），读取对应 key 的值，若存在且匹配某个 option.value，就设 select.value = storedValue
注意兼容性：某些隐私模式下 localStorage 可能被禁用，需 try/catch 包裹
别忘了处理表单重置：form.reset() 会清空 select.value，但不会清 localStorage，需手动同步

示例片段：

const sel = document.querySelector('select[name="city"]');
const saved = localStorage.getItem('city');
if (saved && Array.from(sel.options).some(opt => opt.value === saved)) {
  sel.value = saved;
}