保持 Select2 打开（从不折叠/允许大小属性）

Question

注意：我的示例在JSFiddle 上。

我有一个这样的列表框：

<select id="plain" size="3">
  <option value="first">First</option>
  <option value="second">Second</option>
  <option value="third">Third</option>
  <option value="fourth">Fourth</option>
</select>

请注意，列表框立即在屏幕上显示 3 个项目：

我想让这个列表框更容易搜索，所以我使用了 Select2：

HTML：

<select id="fancy" size="3">
  <option value="first">First</option>
  <option value="second">Second</option>
  <option value="third">Third</option>
  <option value="fourth">Fourth</option>
</select>

JS：

$('#fancy').select2();

但结果是：

我想size="3"获得荣誉，但我不知道如何获得。有closeOnSelect: false（来自这个问题），但双击后它仍然关闭。我的谷歌搜索不是很有成效。

Answer 1

这似乎不是 select2 库的一部分，但您可以为此使用一些 javascript：

var list = $("#fancy").select2({
  closeOnSelect: false
}).on("select2:closing", function(e) {
  e.preventDefault();
}).on("select2:closed", function(e) {
  list.select2("open");
});
list.select2("open");

现在的问题是 select2 并没有真正显示您想要的 3 个项目（而是所有 4 个）。要解决这个问题，您可以更改 css（但您必须说出打开菜单的确切高度）：

.select2-container--default .select2-results > .select2-results__options {
    max-height: 90px
}

这90px是你的例子。在不同的字体大小/字体系列/等中，它可能会有所不同。

并隐藏选择箭头：

.select2-selection__arrow {
    display: none
}

这是您的 jsfiddle 的更新：https ://jsfiddle.net/pk9fu6mn/2/