最简下拉菜单直接用文本即可，无需JS和CSS；需避免内嵌HTML、value含空格或特殊字符、多个selected等错误。

怎么用原生 写最简下拉菜单

直接写 包住 就行，不用 JS、不配 CSS 也能跑。浏览器原生支持 Tab 切换、方向键上下选、屏幕阅读器识别，结构干净，语义正确。

常见错误现象： 里塞了 或 emoji → 渲染为空白或被忽略；value 值带空格或未闭合引号 → 表单提交值错乱；多个 selected → 行为不一致，只第一个生效。

• value 必须是合法字符串（推荐纯英文/数字，避免空格、中文、特殊符号）
• 默认选中项加 selected 属性，仅限一个
• 禁用整个控件，在 上加 disabled；只禁某一项，在对应 上加
• 占位提示（如“请选择…”）要同时加 disabled 和 selected，且 value=""

multiple 属性开启多选后为什么不像传统下拉？

因为原生 不是“点击展开”的下拉，而是始终展开的多行列表——它本质是个滚动选择框，不是弹层。这是规范行为，不是 bug。

常见错误现象：设了 multiple 却没设 size → Chrome 默认显示约 4 行，Firefox 可能撑满容器；设 size="1" → 外观像单选下拉，但行为仍是多选（需 Ctrl/Cmd 点击）；移动端点一下就收起 → iOS Safari 的原生限制，无法绕过。

• size 控制可见行数，比如 size="3" 显示 3 行选项，不设则按浏览器默认（通常 4）
• 必须用 select.selectedOptions 获取选中值，select.value 只返回第一个或空字符串
• 表单提交时，同名参数会重复发送：tags=js&tags=css&tags=html，后端需按数组接收
• iOS Safari 完全不支持触屏多选，哪怕加了 multiple，用户也只能单选

在表格 里放 有什么坑？

可以放，也推荐放——只要不指望 里渲染 HTML 或复杂样式。原生方案最稳，尤其对管理后台类表格。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

常见错误现象：给 加 padding 没反应 → 实际渲染层是浏览器私有控件，CSS 作用有限；想用 background-color 给选项上色 → 全部失效；动态插入 后焦点丢失 → 用了 innerHTML += 而非 select.add(new Option())。

• 不要在 中写任何 HTML 标签，只允许纯文本
• 联动填值时，从事件源出发用 this.closest('tr') 定位当前行，别硬写 parentNode.parentNode
• 动态增删行必须用事件委托监听 change，不能直接绑在每个 上
• 移动端点击后立即收起是 iOS 特性，不是代码问题；若强求体验，得换 JS 模拟组件

什么时候该放弃原生 ？

当需求明确超出原生能力边界时再动 JS：需要搜索过滤、图标、分组折叠、自定义滚动条、高亮关键词、支持鼠标悬停预览、或统一桌面/移动端多选体验。

容易被忽略的点：原生 在 Windows Chrome/Firefox 下，border-radius、background、font-size 等样式部分失效； 的 label 无法用 CSS 单独控制颜色或字体；iOS Safari 对 multiple 的支持形同虚设——这些不是你代码写错了，是平台限制。

真要定制，保留隐藏原生 用于表单提交，再用

++

模拟 UI，否则可访问性和键盘导航会崩。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！