保持 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（来自this question），但双击后它仍然关闭。我的 Google 搜索是 not 非常 fruitful。

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 是您的示例。在不同的 font-size/font-family/etc 中可能会有所不同。

并隐藏选择箭头：

.select2-selection__arrow {
    display: none
}

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