HTML网页下拉多选菜单的简易实现代码-html教程-PHP中文网

原生支持多选，需配合 Ctrl/Cmd 或 Shift 键操作，selectedOptions 获取选中值，移动端体验差且样式难定制，适合桌面端管理后台。

html网页下拉多选菜单的简易实现代码

用实现基础多选下拉

HTML 原生就支持多选下拉，不需要 JS 或第三方库——关键就是给加上 multiple 属性。浏览器会自动渲染为可按 Ctrl/Cmd（或 Shift）多选的滚动列表。

注意：默认样式在不同浏览器中差异较大，比如 Chrome 显示固定高度、Firefox 可能撑开，且不支持点击展开/收起，它本质是个“始终展开”的控件。

size 属性决定可见行数（例如 size="4"），不设则默认显示约 4 行；设为 1 会退化为单选，multiple 失效
用户需配合键盘操作：Windows/Linux 按住 Ctrl 点击切换单个选项，Shift 点击实现区间选择；macOS 对应为 Cmd
提交表单时，选中的多个会以同名参数重复发送（如 tags=js&tags=css&tags=html），后端需按数组方式接收

<select name="tags" multiple size="4"><option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="ts">TypeScript</option></select>

获取选中值要用 `selectedOptions` 而非 `value`

的 value 属性只返回第一个选中项（或空字符串），完全不可靠。必须用 selectedOptions 集合遍历取值。

selectedOptions 是实时的 HTMLCollection，包含所有当前被选中的元素
推荐用扩展运算符转成数组再 .map() 提取 value：[...select.selectedOptions].map(o => o.value)
若需同时获取文字内容，用 o.text；判断是否为空选中，检查 selectedOptions.length === 0

const select = document.querySelector('select[name="tags"]');<br>const selectedValues = [...select.selectedOptions].map(opt => opt.value);<br>// → ['html', 'js']

移动端多选体验差，得加视觉反馈

在 iOS Safari 和部分安卓浏览器中，会触发全屏原生选择器，且不显示已选项勾标，用户根本不知道自己选了几个——这是最常被忽略的实际问题。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

无法通过 CSS 伪类（如 ::-webkit-scrollbar）可靠定制滚动条，更没法加复选框图标
如果项目必须支持移动端多选，建议放弃原生 multiple，改用带搜索、可点击打钩的 JS 方案（如 Choices.js 或 tom-select）
若坚持用原生方案，至少加一段提示文字：“长按可多选”或“按住 Cmd/Ctrl 点击”，并确保 size 足够大（≥3）让用户看到多个选项

提交前校验选中数量：别只靠 `required`

required 属性对的作用是「至少选一个」，但它不阻止用户取消所有选项后再提交——因为控件本身始终处于“可交互”状态，没有“未填写”的中间态。

表单提交时，需手动检查：if (select.selectedOptions.length === 0) { /* 提示错误 */ }
不要依赖 select.checkValidity() 单独判断，它在某些浏览器中对 multiple 返回 true 即使没选任何项
若限制最多选 3 个，需在 change 事件里拦截：if (selectedOptions.length > 3) { alert('最多选3个'); e.target.selectedIndex = -1; }（注意：直接设 selectedIndex 无效，得用 JS 反向取消多余选项）

实际项目中，原生最适合后台管理页或桌面端内部工具——一旦涉及移动端、设计一致性、或复杂交互（如搜索过滤、分组、禁用选项），就得换方案。别为了“少写几行 JS”牺牲可用性。