Select2 下拉列表未重新定位以显示添加的标签

Question

我正在使用Select2（版本 4.0.2）来允许用户选择多个值并为它们制作标签。 The problem is that when the span holding the tags is expanded after new tags are selected, the drop-down values list area is not repositioned accordingly.

此图显示了 Select2 区域，其中包含几个先前选择的值，在选择其他值之前：

此图显示了我选择一个或多个选项后发生的情况，这些选项是隐藏的，因为标签区域比原来高，但下拉选项列表卡在同一位置：

如果我从（模糊）标签区域获得焦点，下拉菜单会重新显示在适当的位置以显示所有当前选择的值/标签：

问题

如何让下拉选项区域在选择新标签值时动态重新定位？我可以拦截 Select2 事件并以某种方式强制它重新计算垂直位置吗？或者可能是blur() 然后focus() 每次选择时的跨度？

Answer 1

我想出的解决方案是在选择或取消选择下拉选项时强制调整下拉元素的大小，这需要捕获"change" 事件：

// Apply Select2 to the <select> element
var select2Elem = $("#" + controlID).select2(opts);

// Force drop-down list to resize upon select/unselect
select2Elem.on("change",
    function(evt) {
        select2Elem.resize();
    }
);