单击外部时，Select2不会关闭选择框（closeOnSelect = false） [英] Select2 does not close the choices box on clicking outside it (with closeOnSelect=false)

问题描述

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

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

当选项框打开时，如果您尝试点击选项框上以外的任何地方，则不会关闭。但是，如果你在Current-Selection行的水平点击外面，那么它就会关闭。

When the choice box is open, if you try clicking anywhere outside on the level of the choice box, it doesn't get closed. However, if you click outside on the level of the Current-Selection line, then it does get closed.

如果外面的任何一个强制Select2选择框关闭点击是否已执行，包括在选择框的级别上？

How can I force the Select2 choice box to close when any outside click is performed, including on the level of the choice box?

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

P.S. I am using the closeOnSelect: false option to keep the choice box always open during the selection process -- but it should still close on an outside click,

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

另一个类似问题 - 当closeonselect为false时，点击关闭select2

推荐答案

不知道导致问题的原因，但是将其添加到CSS'修复'它

Don't know what causes the problem, but adding this to your CSS 'fixes' it

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>

这篇关于单击外部时，Select2不会关闭选择框（closeOnSelect = false）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！