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

看來喜歡的事，不是選擇2庫的一部分，但你可以使用針對一些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"); 

現在的問題是，選擇2並不真正只顯示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/