保持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：

\d

现在的问题是，select2并不真正只展示你想要的3个项目（但是全部4个）。要解决此问题，您可以更改css（但您必须说明打开菜单的确切高度）：

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-container--default .select2-results > .select2-results__options { max-height: 90px } 仅供参考。在不同的font-size / font-family / etc中，它可能会有所不同。

隐藏选择箭头：

90px

以下是对jsfiddle的更新：
https://jsfiddle.net/pk9fu6mn/2/