Javascript 选择2不关闭的多选选择在所选标记的顶部选择重叠结果

问题：

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

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

当我有一个

select2（）

且

closeOnSelect=false时，

结果列表与所选值重叠，而所选值的数量会导致值环绕

HTML:

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

$("#e1").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>

$("#e1").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>

$("#e1").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>

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

我找到了一个解决方法，希望能有其他建议

为打开的添加事件处理程序，并选择每次重新定位结果范围的事件

$("#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
  });  
});;

工作小提琴：

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

$("#e1").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>

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

---

虽然不比萨吉扬的回答干净多少。您可以在select的更改事件中调用close和open。这会导致在每次选择时重新绘制框，而无需知道select2使用此版本时的类名（以防更改）

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

---

旁注：虽然很烦人，但不管有没有这个，每次选择后滚动条都会返回顶部。不寒而栗你的例子没有包括取消选择项目。不过对事件处理程序做了一些小改动。您只需在查看后使用

change

，select2似乎没有重新绘制的方法，无需关闭和打开。在他们的github上可能需要一些东西：很公平，您的代码更干净，并且不像我的答案那样依赖于CSS类名。我会接受它，我希望select2能站在他们这边处理它，尽管这是一个bug。哦，好吧，也许在未来的版本中！谢谢你的时间！