如何让select2下拉菜单在最初打开时滚动到所选内容

Question

当我将jquery select2附加到已选择了选项的<select>时，下拉菜单不显示所选选项。如果我选择新选项，请关闭下拉列表，然后重新打开它，下拉列表会显示该选项。

示例小提琴：https://jsfiddle.net/9tf2nx8L/1/

重现的步骤：

1. 注意＆＃34; 5＆＃34;在标记中选择
2. 点击select2框
3. 注意选项列表如何从顶部开始
4. 点击其他选项。
5. 在下拉列表外单击，使其消失
6. 再次点击select2框
7. 注意如何滚动选项列表以使新选择的选项可见

我认为这是一个错误报告，但是想先用SO进行理智检查。

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]

如果这看起来像是一个迂回的回答 - 那就是。我不知道你想去的兔子洞有多深，但我希望它可以引导你走向正确的方向。