html原生多选需显式添加multiple布尔属性，配合ctrl/cmd或shift点击操作；value属性仅返回首项，应遍历options或用selectedoptions获取全部值；样式受限且跨端不一致，定制需求强时建议换用自定义组件或成熟库。
HTML原生
原生 <select></select> 支持多选，但必须显式加 multiple 属性，否则永远单选。没加这个属性时，哪怕按住 Ctrl 或 Cmd 点击，也只会切换当前选中项，不会累积。
关键点：
-
multiple是布尔属性，写上即生效，无需赋值（multiple="true"反而多余） - 用户需配合键盘操作：Windows/Linux 用 Ctrl + 点击，macOS 用 Cmd + 点击；Shift + 点击可选区间
- 默认不显示滚动条，如果选项多，建议加
size属性控制可见行数，比如size="5"
<select multiple size="5"><option value="a">Apple</option> <option value="b">Banana</option> <option value="c">Cherry</option></select>
JavaScript读取多选
原生 <select multiple></select> 的 value 属性只返回第一个选中项，不能反映全部选择 —— 这是新手最常踩的坑。
正确做法是遍历 options 集合，检查每个 selected 状态：
const select = document.querySelector('select[multiple]');
const selectedValues = Array.from(select.options)
.filter(opt => opt.selected)
.map(opt => opt.value);
注意：select.selectedOptions 是更简洁的替代方案（IE 不支持，现代浏览器均可）：
const values = Array.from(select.selectedOptions).map(opt => opt.value);
样式和交互体验问题怎么处理
原生多选 <select></select> 在不同系统、浏览器里长得差异极大：macOS 下像列表框，Windows 下带复选框图标但不显示勾，移动端经常直接弹出全屏选择器。没法用 CSS 深度定制选项样式（<option></option> 几乎不响应 background 或 padding）。
如果需要统一外观、搜索、分组、禁用某几项等高级功能，别硬改原生控件 —— 直接换方案：
- 用
<div> + <code><input type="checkbox">自建下拉面板（轻量可控） - 引入成熟库如
Choices.js或tom-select（支持搜索、标签、异步加载） - 框架内优先用封装组件：React 的
react-select、Vue 的el-select（multiple模式开箱即用） - Node.js（Express）：需用
req.query.fruit或req.body.fruit接收数组（默认可能是字符串，要配置extended: true） - PHP：
$_GET['fruit']或$_POST['fruit']直接是数组 - Python（Flask）：
request.form.getlist('fruit')才能拿到全部值，get()只返回第一个
后端接收多选数据要注意什么
表单提交时，<select multiple></select> 的多个值会以同名参数重复出现（如 fruit=a&fruit=b&fruit=c），不是逗号分隔字符串。
服务端处理逻辑取决于你用的框架：
AJAX 提交时，确保序列化逻辑把多选值转成数组而非字符串 —— 用 FormData 最稳妥，它会自动按规范编码。
多选下拉真正麻烦的从来不是“怎么写”，而是“怎么让不同终端表现一致”和“怎么让后端不丢值”。原生方案够用就别动，真要定制，早换组件比后期 patch 强得多。
