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

Question

我正在使用select2在我的网站上。在某个时候，我需要知道下拉框是打开的还是关闭的。我已经研究了文档，但是我不知道如何实现。例如，这样做会很好：

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

任何建议吗？

- Jeanluca Scaljeri

---

当它打开时，它肯定会添加一个类，调试它并查看它添加了哪个类，然后使用一些 jQuery('#myselect theClassIFound')。 - bto.rdz

它只是更改html属性style="display: block/none;"，因此可以使用一些jquery来检测该更改并进行操作。 - bto.rdz

我在选择元素上没有看到任何变化。这里是一个jsfiddle。 - Jeanluca Scaljeri

我不确定为什么fiddles没有显示它，但如果你调试你的浏览器，你就会看到它。 - bto.rdz

Answer 1

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

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

- Invis1ble

---

select2:close 做相反的操作 - NooBskie

不适用于多个。 - jjxtra

Answer 2

Select2 4.0提供了一个isOpen方法。如果#mySelect是你的HTML选择元素，则：

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

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

- Paul

---

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

Answer 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年以来，活动名称似乎已经更新。请参见下面用户1636505的答案。

- jwatts1980

---

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

"select2:open" 是一个事件。 - greatgumz

Answer 4

自Select2 4.0.6版本开始，已更新为以下内容。

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

这将返回真/假。

希望这有所帮助！

- MigratingCub

---

这在jQuery v3.6.0和select2 v4.1.0上返回“未定义”。 - Luke

Answer 5

change事件在选项被选择或移除时触发。

select2:open事件在下拉列表打开时触发。select2:opening事件在此之前触发，可以被阻止。

select2:close事件在下拉列表关闭时触发。select2:closing事件在此之前触发，可以被阻止。

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

select2:unselect事件在结果被取消选择时触发。select2:unselecting事件在此之前触发，可以被阻止。

- yousef

Answer 6

最好这样做：

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

- fedda

Answer 7

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

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

- Robin

Answer 8

它完美地运作。

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

- Mahfuzur Rahman