Select2/Chosen/Bootstrap-Multiselect：如何实现多选框默认展示选项？

嘿，我刚好碰到过类似的需求，给你整理了针对Select2、Chosen和Bootstrap-Multiselect这三个组件的实现方案——都是基于它们的现有API做的自定义调整，毕竟官方确实没提供直接默认展开的配置项：

Select2 #

Select2本身没有一键开启默认展开的配置，但我们可以通过JS触发下拉展开，再配合事件阻止它自动收起：

1. 初始化后触发展开：

// 替换成你的select元素ID
$('#multi-select').select2().select2('open');

2. 阻止点击外部收起下拉框：

$('#multi-select').on('select2:closing', function(e) {
  e.preventDefault(); // 取消默认的关闭行为
});

3. 可选：隐藏下拉触发箭头，让组件更贴近原生multiple select的外观：

.select2-selection__arrow {
  display: none;
}

Chosen #

Chosen的思路和Select2类似，通过触发展开事件+阻止收起事件来实现：

1. 初始化后强制展开下拉菜单：

$('#multi-select').chosen().trigger('chosen:open');

2. 阻止下拉框自动收起：

$('#multi-select').on('chosen:hiding_dropdown', function(e) {
  e.preventDefault();
});

3. 可选：隐藏触发箭头：

.chosen-single .chosen-arrow {
  display: none;
}

Bootstrap-Multiselect #

这个组件的回调支持更直接，我们可以在初始化完成后触发展开，还能通过配置阻止收起：

1. 初始化时绑定展开逻辑：

$('#multi-select').multiselect({
  // 组件初始化完成后立即展开下拉框
  onInitialized: function() {
    $(this).multiselect('show');
  },
  // 阻止下拉框收起
  onHide: function() {
    return false;
  }
});

额外提示 #

如果选项数量较多，建议给下拉框设置最大高度并开启滚动，避免页面布局混乱：

.select2-dropdown, .chosen-drop, .multiselect-container {
  max-height: 300px;
  overflow-y: auto;
}

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