Angular 4+中如何用select绑定多选选项？绑定后样式异常求排查

嘿，这个问题我之前也碰到过！其实不是你操作错了，是原生HTML里multiple属性的默认表现和你预期的不一样～

当你给<select>加上multiple（不管是写multiple还是multiple="true"），它就不再是下拉菜单了，而是变成了一个列表框控件——默认情况下它只会显示几行选项，剩下的需要滚动查看，所以看起来和正常下拉菜单完全不同，会让你觉得是“异常样式”。

下面给你几个解决方向，按需选就行：

1. 接受原生列表框样式，调整显示行数 #

如果你能接受列表框的形式，只需要给<select>加个size属性，指定要显示的行数，就能让它的样式更可控：

<select multiple size="4">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
  <option value="5">选项5</option>
</select>

size="4"会让控件默认显示4行选项，超出的部分会出现滚动条，这样就不会看起来“异常”了。

2. 实现下拉式的多选（需要JS/UI库） #

如果你的需求是保持下拉菜单的样式，同时支持多选，那原生HTML的<select multiple>做不到这一点，得借助JavaScript或者现成的UI组件库，比如：

• Select2
• Bootstrap Select
• Chosen

这些库都能把原生select转换成带下拉样式的多选控件，用法也很简单，比如用Select2的话，只需要引入库的CSS和JS，然后给目标select加个初始化代码：

$(document).ready(function() {
  $('select').select2();
});

（注意：使用这些库前要确保你已经引入了对应的依赖，比如jQuery对于Select2是必需的）

3. 排查CSS冲突 #

如果上面两种情况都不是你的问题，那可能是页面里的自定义CSS影响了<select multiple>的样式。比如有些样式会强制设置display: none、奇怪的height或者overflow属性，导致控件无法正常显示。你可以打开浏览器的开发者工具，检查这个select元素的样式，看看有没有被意外覆盖的情况。

内容的提问来源于stack exchange，提问作者peter-stuart-turner