javascript-保持Select2打开(从不收起/允许大小属性)

注意：我的示例在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.

解决方法:

似乎它不是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/

标签：jquery-select2,html,javascript
来源： https://codeday.me/bug/20191112/2023789.html