最初打开时如何让select2下拉菜单滚动到选择

Question

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

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

重现步骤：

1. 在标记中选择了通知“5”
2. 单击 select2 框
3. 注意选项列表是如何从顶部开始的
4. 单击另一个选项。
5. 在下拉列表之外单击，导致其消失
6. 再次单击 select2 框
7. 请注意选项列表如何滚动以使您新选择的选项可见

我认为这是一个错误报告，但想先用 SO 对其进行完整性检查。

Answer 1

您可能需要对某些 ​​select2 核心进行一些覆盖。滚动到当前选定项的调用方法是

确保HighlightVisible()

它位于 select2 的 results module 内。如果您沿着覆盖核心的路线走，您可以在绑定到结果模块时从 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]

如果这看起来像是一个迂回的答案 - 它就是。我不知道你想去多深的兔子洞，但我希望它能引导你朝着正确的方向前进。

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