Select2を開いたままにする（折り畳まない/サイズ属性を許可しない）

Question

注：私の例はJSFiddleです。

私のようなリストボックスがあります：リストボックスがすぐに画面上の3項目が表示されていることを

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

注：

私はこのリストボックスは、より簡単に検索できるようにしたい、そうし私は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を使用することができます。

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/