最初に開いたときに選択範囲にスクロールするselect2ドロップダウンを取得する方法

Question

すでにオプションが選択されている<select>にjquery select2を添付すると、ドロップダウンには選択されたオプションが表示されません。新しいオプションを選択した場合は、ドロップダウンを閉じてからもう一度開いてください。ドロップダウンにはオプションが表示されます。ここ

例フィドル：https://jsfiddle.net/9tf2nx8L/1/

手順を再現する：

1. お知らせ "5" のマークアップで選択されている
2. クリックSELECT2ボックスのオプションのリストがで始まり、どのよう
3. お知らせトップ
4. 別のオプションをクリックします。
5. それは
6. を消えさせるドロップダウンの外側をクリックし、再び
7. をSELECT2ボックスをクリックしてオプションのリストは、新しく選択したオプション見える

を持つようにスクロールしたかに注意してください、私はこれを考えているありますバグレポートですが、最初にそれを正当性チェックしたかったのです。そこ

Answer 1

あなたが行く：

function dropscroll(){ 
     document.getElementById($(".select2-results__options").attr("id")).scrollTop = $(".select2-results__option[aria-selected=true]").outerHeight() * $(".select2-results__option[aria-selected=true]").index() - 100; 
    } 
    $(document).on("click",".select2-container", function(){ 
     setTimeout("dropscroll()",1); 
    }) 

Answer 2

あなたは、いくつかのSELECT2コアのいくつかのオーバーライドを行う必要があります。現在選択された項目にスクロールするに呼び出されるメソッドは

ensureHighlightVisible（）

これは、SELECT2のresults moduleの内側に位置しています。コアをオーバーライドするルートを下った場合、結果モジュールにバインドするときにselect2の 'results：all'イベントにフックできます。あなたのコードは次のようになります：

[omitted code here] 

    YourClassThatOverridesResults.prototype.bind = function (decorated, container, $container) { 
       var self = this; 
       decorated.call(this, container, $container); 

       container.on('results:all', function (params) { 
        if (container.isOpen()) 
        { 
         self.setClasses(params); 
         self.ensureHighlightVisible(); 
        } 
       }); 
    } 
[omitted code here] 

これはラウンドアバウトの回答のようです - それはそうです。私はあなたが行きたいウサギの穴の深さを知っていませんが、あなたが正しい方向にあなたを導くことができることを願っています。