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

Posted 2023-05-07

【中文标题】通过 javascript/jquery 关闭 select2 下拉菜单

【英文标题】：close select2 dropdown via javascript/jquery

【发布时间】：2014-03-06 01:47:42

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

尝试 -> 关注任何其他元素。

感谢@TusharGupta 的建议，但我已经这样做了，我确实在模态框上设置了我的文本框，以便在显示模态框时聚焦。

【参考方案1】：

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

Select2 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");
)

【参考方案2】：

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

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

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

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

Documentation

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

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

【参考方案3】：

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

【参考方案4】：

select2-dropdown-*mask* 不适合我，但下面的可以。

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

【讨论】：

@stevemoretz - 有没有办法按类关闭它们？ （无需使用每个 ID）

@BeninCA 可能通过使用 $('.id').each(function())$(this).select2('close');

@stevemoretz - 试过这样，但不行：$('.select2').each(function()$(this).select2('close');)

转而发布了一个新问题：***.com/questions/58347627/…

@BeninCA 这就是为什么我说这些东西可能有点连贯。尤其是在不同的版本中，您会得到不同的结果。希望新问题会得到很好的最新答案

【参考方案5】：

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

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

【讨论】：

感谢 @Ner $(document.body).trigger('mousedown'); 在 BS4 上为我工作

【参考方案6】：

select2-dropdown.blur();

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

【讨论】：

感谢@mbecares 的回答，这也是我的想法，我应该使用 blur() 函数，但它仍然无法正常工作。顺便说一句，我使用的是文本框，因为你不能在“select”上使用select2的ajax函数

【参考方案7】：

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

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

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