javascript - 保持 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 )，但双击后它仍然关闭。我的谷歌搜索是 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 是您的示例。在不同的字体大小/字体系列/等中，它可能会有所不同。

并隐藏选择箭头:

.select2-selection__arrow {
    display: none
}

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