Bootstrap Multiselect动态预设选中项失效：仅选中第一项

我之前在项目里也碰到过一模一样的情况——明明给多个option加了checked="checked"属性，但Bootstrap Multi-select就是只选中第一项，剩下的都没反应。其实这是因为组件的初始化逻辑不会自动批量读取原生select的选中状态，得用它提供的API来手动同步。

下面给你两种可行的解决办法：

方法一：初始化后手动选中所有预设项 #

先正常初始化Multi-select组件，再遍历原生select里的已选中选项，调用组件的select方法逐个选中：

// 先初始化Multi-select组件
$('select[name="somename"]').multiselect();

// 遍历所有带checked属性的option，调用组件API选中
$('select[name="somename"] option:checked').each(function() {
  $('select[name="somename"]').multiselect('select', $(this).val());
});

方法二：初始化时直接传入选中值数组 #

先收集所有已选中option的value，然后在初始化组件的时候通过selectedOptions参数一次性设置：

// 收集所有预设选中项的value值
var selectedValues = $('select[name="somename"] option:checked').map(function() {
  return $(this).val();
}).get();

// 初始化组件并设置选中项
$('select[name="somename"]').multiselect({
  selectedOptions: selectedValues
});

为什么原生checked属性不生效？ #

Bootstrap Multi-select的工作原理是隐藏原生的select元素，然后自己渲染一套自定义的多选UI。它不会自动监听原生select的checked属性变化，也不会在初始化时批量读取这些属性来同步选中状态——只靠原生属性的话，组件只会默认识别第一项的选中状态，这就是问题所在。

额外注意事项 #

• 确保你的jQuery版本和Bootstrap Multi-select版本兼容，部分旧版本组件可能存在类似的同步bug
• 如果你的option是动态生成的（比如通过AJAX加载后添加checked属性），一定要等DOM渲染完成后再执行上述初始化或选中逻辑

内容的提问来源于stack exchange，提问作者Nazrul Kabir