2016-12-02 82 views
3

注意:我的示例在JSFiddle上。保持Select2打開(從不折疊/允許大小屬性)

我有一個列表框這樣:

<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個項目:

example listbox

我想更方便地搜索使這個列表框,所以我用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(); 

但結果是:

example select2

我想size="3"兌現,但我無法弄清楚如何。有closeOnSelect: false(從this question),但它仍然關閉後雙擊。我的谷歌搜索是not非常fruitful

回答

3

看來喜歡的事,不是選擇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/

+0

這不正是我需要的,謝謝。我可以添加'.select2-selection__arrow {display:none}'?這將隱藏不再具有功能的向下箭頭。 –

+0

是的,我猜你會想要的:)歡迎您更新我的答案,並在那裏添加它,如果你想:) – Dekel