Как получить выпадающий список select2 для прокрутки к выделенному при первоначальном открытии

Когда я прикрепляю jquery select2 к <select> в котором уже выбран параметр, раскрывающийся список не отображает выбранный параметр. Если я выберу новую опцию, закройте выпадающий список, а затем снова откройте его, выпадающий список показывает опцию.

Пример скрипта здесь: https://jsfiddle.net/9tf2nx8L/1/

Действия по воспроизведению:

  1. В разметке выбрано "5"
  2. Щелкните поле select2
  3. Обратите внимание, как список опций начинается сверху
  4. Нажмите другой вариант.
  5. Нажмите за пределами выпадающего списка, чтобы он исчез
  6. Снова нажмите на поле select2
  7. Обратите внимание, как прокручивался список опций, чтобы ваш вновь выбранный вариант был виден

Я думаю, что это отчет об ошибке, но хотел проверить его в первую очередь с помощью SO.

2 ответа

Там вы идете:

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);
    })

Возможно, вам придется переопределить ядро ​​select2. Метод, который вызывается для прокрутки к текущему выбранному элементу, является

ensureHighlightVisible ()

Он находится внутри модуля результатов select2. Если вы идете по пути переопределения ядра, вы можете подключиться к событию "results: all" из select2 при привязке к модулю результатов. Ваш код будет выглядеть примерно так:

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

Если это похоже на окольный ответ - так и есть. Я не знаю, как глубоко в кроличью нору вы хотите пройти, но я надеюсь, что это может привести вас в правильном направлении.

Другие вопросы по тегам