select元素无法通过HTML属性控制展开，因其展开行为由浏览器原生UI严格管控，HTML标准中无open等有效属性；唯一原生无JS可展开容器是details/summary，但语义上非表单选择控件。
纯 HTML 下拉列表无法实现“点击展开/收起”的交互效果——select 元素本身不支持自定义展开状态，而 details/summary 是唯一原生、无 JS 的可展开容器，但它不是语义化的下拉选择控件。
为什么 select 不能靠 HTML 属性控制展开
select 元素的展开行为完全由浏览器 UI 控制，HTML 标准中没有任何属性（如 open、expanded）能触发或锁定其下拉面板。尝试添加 open 属性无效，它只对 details 生效；disabled 或 required 等属性也仅影响表单验证和可用性，不改变展开逻辑。
常见误操作包括：
- 给
select加open属性 → 浏览器忽略，无任何效果 - 用
size="4"强制显示多选项 → 这是多行列表，非下拉，且失去原生下拉焦点/键盘导航行为 - 套
div+tabindex模拟 → 缺少role="combobox"和 ARIA 管理，不可访问、不兼容屏幕阅读器
唯一可行的无 JS 方案：用 details + summary 模拟视觉下拉
虽然语义上不是 select，但 details 是 HTML 原生支持的、无需 JS 即可展开/收起的交互容器，适合做轻量级选项菜单（如筛选、快捷跳转）。关键点：
立即学习“Java免费学习笔记（深入）”；
-
summary内容默认可见，点击后展开details的子内容 - 支持键盘操作：
Enter和Space触发展开/收起 - 可嵌入
a、button或表单控件，但注意：内部input不会自动提交，需配合form属性或手动处理 - 样式高度可控，用 CSS 可模拟下拉箭头、边框、悬停态等
示例结构：
<details>
<summary>请选择分类</summary>
<ul>
<li><a href="?cat=tech">技术</a></li>
<li><a href="?cat=design">设计</a></li>
</ul>
</details>
语义与无障碍的取舍：何时该坚持用 select
如果目标是让用户「从一组值中选一个并提交到表单」，就必须用 select —— 它天然支持 name/value、表单序列化、FormData、键盘导航（方向键切换选项）、屏幕阅读器朗读选项数和当前选中项。任何基于 details 的模拟都会丢失这些能力，除非额外加 ARIA（但 ARIA 无法补全表单提交行为）。
所以真实场景判断依据是：
- 需要表单提交或后端接收值？→ 必须用
select，接受其原生展开不可控 - 只是页面内导航或视觉分组？→
details安全、轻量、无 JS - 要求 WCAG 2.1 AA 合规？→
select开箱即用；details需测试展开状态是否被正确通告（现代浏览器基本支持）
真正容易被忽略的是：很多开发者试图用 details 替代 select 来“避免写 JS”，结果导致表单逻辑断裂或移动端触摸区域过小。交互需求决定技术选型，而不是反过来。
