Select2 在外部单击时不会关闭选择框（closeOnSelect=false）答案

【问题标题】：Select2 does not close the choices box on clicking outside it (with closeOnSelect=false)Select2 在外部单击时不会关闭选择框（closeOnSelect=false）
【发布时间】：2018-09-12 14:17:28
【问题描述】：

JSFiddle：http://jsfiddle.net/xpvt214o/776660/

When the choice box is open, if you try clicking anywhere outside on the level of the choice box, it doesn't get closed.但是，如果您在当前选择线的级别上单击外部，则它确实会关闭。

当执行任何外部单击（包括在选择框级别）时，如何强制关闭 Select2 选择框？

附：我使用closeOnSelect: false 选项在选择过程中保持选择框始终打开——但它仍应在外部点击时关闭，

$('#dropdown').select2({
    closeOnSelect: false
});

另一个类似的问题 - closing select2 on click away when closeonselect is false

【问题讨论】：

标签： jquery jquery-select2

【解决方案1】：

不知道是什么导致了问题，但是将其添加到您的 CSS 中会“修复”它

Select2 Issue 4939

html,
body{
  height: 100%;
}

更新代码

/* Scroll CurrSel SPAN to bottom on every Select2 Select event */
$('#dropdown').on("select2:selecting", function(e) {
  var currselspan = $('#dropdown').next().find('.select2-selection--multiple').first();
  console.log('scrollTop = ' + $(currselspan).scrollTop() + ' scrollHeight = ' + $(currselspan).prop('scrollHeight'));
  $(currselspan).scrollTop($(currselspan).prop('scrollHeight'));
});



$('#dropdown').select2({
  closeOnSelect: false,
});

.select2-selection--multiple {
  height: 2rem;
  max-height: 2rem;
  overflow: auto;
}

html,
body {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<div style="width: 50%">
  <select id="dropdown" style="width: 100%" multiple>
    <option>TEST ELEMENT 1</option>
    <option>TEST ELEMENT 2</option>
    <option>TEST ELEMENT 3</option>
    <option>TEST ELEMENT 4</option>
    <option>TEST ELEMENT 5</option>
    <option>TEST ELEMENT 6</option>
    <option>TEST ELEMENT 7</option>
    <option>TEST ELEMENT 8</option>
    <option>TEST ELEMENT 9</option>
    <option>TEST ELEMENT 10</option>
    <option>TEST ELEMENT 11</option>
    <option>TEST ELEMENT 12</option>
    <option>TEST ELEMENT 13</option>
  </select>
</div>

【讨论】：

谢谢，解决了。我还尝试了一个自定义的 $(document).click() 处理程序，但它永远无法拦截我在该区域的点击，所以我不得不使用这个 CSS 解决方案。