Wie select2 Dropdown zu scrollen, um beim ersten Öffnen zu Auswahl zu scrollen

Question

Wenn ich jquery select2 an eine <select> anfügen, die bereits eine Option ausgewählt hat, zeigt das Dropdown-Menü nicht die ausgewählte Option. Wenn ich eine neue Option auswähle, schließe das Dropdown-Menü und öffne es erneut. Das Dropdown-Menü zeigt die Option an.

Beispiel Geige hier: https://jsfiddle.net/9tf2nx8L/1/

Schritte zum Reproduzieren:

1. Hinweis "5" wird im Markup ausgewählt
2. Klicken Sie auf die select2 Box
3. Beachten Sie, wie die Liste der Optionen beginnt bei die obere
4. Klicken Sie auf eine andere Option.
5. Klicken Sie außerhalb der Drop-Down, so dass es
6. Klicken Sie auf die select2 Feld verschwinden wieder
7. Beachten Sie, wie die Liste der Optionen gescrollt hat die neu gewählte Option sichtbar

Ich denke, das ist zu haben ein Fehlerbericht, aber wollte es zuerst mit SO überprüfen.

Answer 1

Dort gehen Sie:

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

Sie müssen etwas überwiegenden einiger select2 Kern tun können. Die Methode, die das scrollt auf das aktuell ausgewählte Element aufgerufen wird, ist der

ensureHighlightVisible()

es im Inneren des results module von select2 gelegen ist. Wenn Sie den Pfad des Überschreibens des Kerns durchgehen, können Sie sich in das Ereignis 'results: all' von select2 einklinken, wenn Sie an das Ergebnismodul binden. Ihr Code würde so etwas so aussehen:

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

Wenn dies wie ein Kreisverkehr Antwort scheint - es ist. Ich weiß nicht, wie tief du in das Kaninchenloch willst, aber ich hoffe, es kann dich in die richtige Richtung führen.