跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

HTML select的multiple多选设置?按住Ctrl选择多项

multiple 属性只需写 multiple 两个字才最有效,浏览器只判断其存在与否;设 size 属性(如 size="4")才能让用户直观识别多选,否则默认显示 1–2 行易被误认为单选。 multiple属性怎么写才有效 只写
multiple
两个字就行,其他写法都容易出问题。浏览器只看这个属性“存不存在”,不读它的值。写成
multiple="true"
、
multiple="1"
或
multiple=""
(空字符串)虽然部分浏览器能容错,但在旧版 Safari 或严格解析环境下可能直接失效。 合法且推荐的写法只有两种:
(首选)或
(XHTML 兼容,但冗余)。别为了“看起来像布尔值”加一堆引号和等号,反而埋下兼容性雷。 为什么加了multiple用户还是只能选一个 常见原因不是代码没生效,而是用户根本不知道要配合键盘操作。原生
select[multiple]
默认不弹下拉菜单,而是渲染成一个固定高度的滚动列表框——如果没设
size
,多数浏览器只显示 1–2 行,视觉上和单选毫无区别。 必须加
size
属性让用户“看见多选”: 立即学习 “ 前端免费学习笔记(深入) ”;
size="4"
:显示 4 行选项,用户一眼明白这是可多选的列表
size
值不能大于总
option
数,否则会撑开布局 不设
size
时,用户得主动按住 Ctrl(Windows/Linux)或 Cmd(macOS)点击,否则每次点击只是切换当前项 JS 怎么安全取到所有选中值
select.value
永远只返回第一个选中项,和是否
multiple
无关。这是最常踩的坑:前端传过去一个值,后端以为漏了逻辑,其实是前端压根没取全。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 正确方式是用
selectedOptions
:
const select = document.getElementById('my-select'); const values = Array.from(select.selectedOptions).map(opt => opt.value);
注意点: IE11 不支持
selectedOptions
,需回退到遍历
select.options
并检查
opt.selected
不要用 jQuery 的
$('select :selected').val()
,它也只返回第一个 如果用 AJAX 提交,千万别把
select.value
当数组传 移动端能不能依赖 multiple 不能。iOS Safari 直接忽略
multiple
和
size
,点开就是单选弹窗;安卓 Chrome 表现也不稳定,有些机型无多选反馈、无法取消已选项。这不是 bug,是平台限制。 如果业务需要真正在移动端多选: 优先用
组合 + CSS 模拟展开/收起 或引入
Choices.js
、
tom-select
这类库,它们内部根本不渲染
select
,而是接管 DOM 若坚持用原生,至少在外层加提示文字:“PC 端按 Ctrl/Cmd 多选”,避免用户困惑 最易被忽略的是:你写了
,在 iOS 上测试时一切正常——因为根本没触发多选逻辑,它连尝试的机会都没给。

相关文章