jquery - Select2 在外部单击时不会关闭选择框(closeOnSelect=false)
问题描述
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 选择框?
PS我正在使用该closeOnSelect: false
选项在选择过程中保持选择框始终打开-但它仍应在外部单击时关闭,
$('#dropdown').select2({
closeOnSelect: false
});
解决方案
不知道是什么导致了问题,但是将其添加到您的 CSS 中会“修复”它
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>
推荐阅读
- kubernetes - 完整的 pod 状态列表
- reactjs - 如何在 cra 中使用 Nextjs
- python - 通过 API 的 CSV - 只能连接 str
- python - 如何通过使用 python 给出条件来自动复制文件?
- javascript - 如何使用 React 显示图像上传预览?
- algorithm - 与选择和排名进行最佳匹配的算法
- php - 使用 XMLReader 查找节点并从当前节点和后续子节点检索 XML
- typescript - 打字稿函数重载:无法访问的“this”类型
- javascript - JavaScript 类 构造函数 用作附加到 HTML 文件的变量
- shell - 将扩展名添加到 bluespice docker 映像