如何检查 Select2 中的下拉菜单是不是打开？

Posted 2023-05-07

【中文标题】如何检查 Select2 中的下拉菜单是不是打开？

【英文标题】：How to check if dropdown is open in Select2?如何检查 Select2 中的下拉菜单是否打开？

【发布时间】：2014-05-21 15:59:38

【问题描述】：

我在我的网站中使用select2。我需要在某个时候知道下拉菜单是打开还是关闭。我研究了documentation，但我不知道如何做到这一点。例如，这样的事情会很好：

if ($('select').select2('isOpen') === true)  ... 

有什么建议吗？

【问题讨论】：

它肯定会在打开时添加一个类，调试它并查看它添加的类，然后使用一些 jquery ('#myselect theClassIFound')

它只是改变了 html 属性 style="display: block/none;"所以玩它并使用一些 jquery 来检测这种变化

我没有看到 select 元素上发生任何事情。这是jsfiddle。

我不知道为什么 fiddles 没有显示它，但是如果你调试你的浏览器你会看到它

【参考方案1】：

在select2 4.0 版中，您可以在select 元素上监听select2:opening、select2:open、select2:closing 和select2:close 事件，例如：

$('select').on('select2:open', function (e) 
    // select2 is opened, handle event
);

【讨论】：

select2:close 做相反的事情

【参考方案2】：

Select2 4.0 有一个isOpen 方法。如果 #mySelect 是您的 HTML 选择元素，那么：

$('#mySelect').data('select2').isOpen()

...将根据 Select2 的状态返回 true 或 false。

【讨论】：

$('#mySelect').data('select2') 在 jQuery v3.6.0、select2 v4.1.0 上不可用。

【参考方案3】：

通过进行一些代码检查，看起来select2-dropdown-open 是它添加的类。但是文档中有一个事件select2-open 在下拉菜单打开时触发。您可以使用它来设置变量或执行操作（也可以使用select2-close）。

你可以这样做：

$("#e11").on("select2-open", function()  
    $(this).data("open", true);
);
$("#e11").on("select2-close", function()  
    $(this).data("open", false);
);

if ($("#e11").data("open")) 
    //do something

2018 年编辑

活动名称似乎自 2014 年以来已更新。See user1636505's answer below。

【讨论】：

类select2-dropdown-open 没有添加到选择元素本身！我注意到有一个事件被触发，但我希望有更好的解决方案

'select2:open' 是事件

【参考方案4】：

从 Select2 4.0.6 开始，已更新为以下内容

$("#foo").select2("isOpen")

这将返回真/假

希望这会有所帮助！

【讨论】：

这将在 jQuery v3.6.0、select2 v4.1.0 上返回“未定义”。

【参考方案5】：

change 在选择或删除选项时触发。

select2:open 会在下拉菜单打开时触发。 select2:opening 在此之前被触发并且可以被阻止。

select2:close 会在下拉菜单关闭时触发。 select2:closure 在此之前被触发并且可以被阻止。

select2:select 在选择结果时被触发。 select2:selecting 在此之前被触发并且可以被阻止。

select2:unselect 会在未选择结果时触发。 select2:unselecting 在此之前被触发并且可以被阻止。

【参考方案6】：

最好这样做：

var select2 = $('#selectorname').data('select2');
if (select2.opened()) 
        //do it
     else 
        //dont do it
    

【参考方案7】：

$('select').select2('isFocused');

https://github.com/select2/select2/issues/39

【参考方案8】：

完美运行。

$(".select2-container").is(":visible")