选择2多选，没有closeOnSelect重叠结果在所选标签之上

Question

问题：

如果select2() closeOnSelect =false, <select multiple id="e1" style="width:300px"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option>... </select> ，则当所选值的值不会导致值回滚时，结果列表会与所选值重叠。

HTML：

$("#e1").select2({
  closeOnSelect: false
})

使用Javascript：

open

截图：

小提琴：

http://jsfiddle.net/sajjansarkar/dsg2t7y2/

Answer 1

虽然没有Sajjan的回答那么干净。您可以在选择的更改事件中调用close并打开。这会导致在每个选择上重新绘制框，而无需知道select2恰好使用此版本的类名（如果它发生更改）。

var select = $("#e1").select2({
  closeOnSelect: false
}).on("change", function(e){
  select.select2("close");
  select.select2("open");
});

http://jsfiddle.net/dsg2t7y2/1/

这具有使用select2通常用于定位下拉列表的相同方法的优点。因此，如果页面上的任何内容在选择时关闭，则外观将保持一致。

旁注：尽管很烦人，无论有没有这个，滚动器在每次选择后都会返回到顶部。 颤抖它有点杀了我内心

Answer 2

解决方案：

我找到了一种解决方法，欢迎其他建议。

为$("#e1").select2({ closeOnSelect: false }).on('select2:select select2:open', function(evt) { var $container = $(this).data("select2").$container.find(".select2-selection__rendered"); var $results = $(".select2-dropdown--below"); $results.position({ my: "top", at: "bottom", of: $container }); });; 添加了一个事件处理程序，并选择了每次重新定位结果范围的事件。

{{1}}

工作小提琴：

http://jsfiddle.net/sajjansarkar/hvsvcc5r/

<强>截图：