通过javascript / jquery关闭select2下拉列表

Question

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

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

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

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

顺便说一下屏幕截图很暗，因为那些select2框在一个自举模式下，只要我按下回车就会出现。

真的很感激任何建议！提前致谢

Answer 1

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

Select2 API

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

这个问题还提到了bootstraps模式对话框，这往往是人们想要以编程方式关闭它的原因。

对于任何人的信息，这就是你如何做到的：

Bootstrap 3

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

Bootstrap 2

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

Answer 2

在v4.0中，其他答案都不适用于我。使用jQuery只选择掩码没有任何效果。我不得不使用选择框本身的id：

<script>document.write('Hello, ' + full_name);</script>

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

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

Documentation

此外，对于 Bootstrap 3 ，$("#mySelectElement").select2().trigger("select2:close"); 事件为时已晚，并且select2蒙版将在动画期间停留一秒钟。 hidden.bs.modal让我们的工作变得更顺畅了：

hide.bs.modal

Answer 3

这个适用于我$("#select2-drop-mask").click();

Answer 4

select2-dropdown-*mask*对我不起作用，但以下情况确实如此。

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

Answer 5

select2-dropdown.blur();

我认为这就是你要找的东西。 Here你刚才在我创建的JSFiddle中有一个例子。

Answer 6

要关闭Bootstrap 4及更高版本中的所有组件。试试：

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