通过 javascript/jquery 关闭 select2 下拉菜单

Question

美好的一天，如何通过 jquery 或 javascript 正确关闭 select2 下拉列表？

现在我使用select2-dropdown.toggle()来关闭它，

但我注意到它只会隐藏列表并且 select2 框仍然被突出显示

我想失去焦点或类似的东西只是为了正确关闭它并能够想出这样的结果 .

顺便说一下，屏幕截图是暗的，因为那些 select2 框位于引导模式下，每当我按 Enter 时就会出现该模式。

任何建议将不胜感激！ 提前致谢

Answer 1

我知道这是一个老问题，但为了使用 API 做到这一点，您只需执行以下操作：

选择2 API

 $("#select2-drop-mask").select2("close");

该问题还提到了引导程序模态对话框，这往往是人们希望以编程方式关闭它的一个原因。

对于任何人的信息，这就是你这样做的方式：

引导程序 3

$('#myModal').on('hidden.bs.modal', function () {
  $('#select2-drop-mask').select2("close");
})

引导程序 2

$('#myModal').on('hidden', function () {
   $('#select2-drop-mask').select2("close");
})

Answer 2

在 v4.0 中，其他答案都不适合我。 使用 jQuery 只选择蒙版没有效果。 我必须使用选择框本身的 id：

$("#mySelectElement").select2("close")

这也有效，但可能不是首选：

$("#mySelectElement").select2().trigger("select2:close");

文档

此外，对于Bootstrap 3 ， hidden.bs.modal事件为时已晚，并且 select2 掩码会在动画过程中停留一秒钟。 hide.bs.modal对我们来说更流畅一些：

$('#modalYourModal').on('hide.bs.modal', function () {
    //close select2 in case its open
    $("#mySelectElement").select2("close");
});

Answer 3

这个对我$("#select2-drop-mask").click();

Answer 4

select2-dropdown-*mask*对我不起作用，但下面的做了。

$('#select2-drop').select2('close');

Answer 5

select2-dropdown.blur();

我想这就是你要找的。 这里有一个我刚刚在 JSFiddle 中创建的示例。

Answer 6

在 Bootstrap 版本 4 及更高版本中关闭所有内容。 尝试：

$('body').trigger('mousedown');

Answer 7

所有 select2 元素都有类select2-hidden-accessible 。 所以我们可以在选择器中使用这个类并关闭所有它们

$('.select2.select2-hidden-accessible').select2('close');

或尝试使用 id 选择器仅关闭其中之一。