How to check if dropdown is open in Select2?

Question

I'm using select2 and in my site. I need to know at some point if the dropdown is open or closed. I've studied the documentation but I don't see how this can be done. For example, something like this would be nice:

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

Any suggestions?

it surely adds a class when it is open, debug it and see wich class it adds, then use some jquery ('#myselect theClassIFound') — bto.rdz, Apr 08 '14 at 18:58
It just changes the html attribute style="display: block/none;" so play with that and use some jquery to detect that change — bto.rdz, Apr 08 '14 at 19:01
I don't see anything happening on the select element. Here is a [jsfiddle](http://jsfiddle.net/LUsMb/2701/). — Jeanluca Scaljeri, Apr 08 '14 at 19:02
I am not sure why fiddles does not show it but if you debug your browser you will see it — bto.rdz, Apr 08 '14 at 19:05

Invis1ble · Answer 1 · 2015-06-24T02:02:11.923

18

In version 4.0 of select2 you can listen to select2:opening, select2:open, select2:closing and select2:close events on select element, for example:

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

edited Jun 24 '15 at 02:02

answered Jun 19 '15 at 19:40

Invis1ble

1,295
2
17
35

1

`select2:close` to do the opposite – NooBskie Apr 27 '16 at 11:02
Does not work for multiple – jjxtra Jan 07 '23 at 21:16

score 13 · Answer 2 · answered Aug 28 '15 at 17:58

13

Select2 4.0 has an isOpen method. If #mySelect is your HTML select element then:

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

...will return true or false depending on the state of Select2.

answered Aug 28 '15 at 17:58

Paul

19,704
14
78
96

$('#mySelect').data('select2') is not available on jQuery v3.6.0, select2 v4.1.0. – Luke Sep 21 '21 at 12:48

jwatts1980 · Accepted Answer · 2018-07-06T15:30:23.993

10

By doing some code inspection, it looks like select2-dropdown-open is the class that it adds. But there is an event select2-open in the documentation that fires when the dropdown is open. You can use that to set a variable, or perform an action (also select2-close).

You can do something like this:

$("#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 Edit

It appears that the names of the events have been updated since 2014. See user1636505's answer below.

edited Jul 06 '18 at 15:30

answered Apr 08 '14 at 19:02

jwatts1980

7,254
2
28
44

the class `select2-dropdown-open` is not added to the select element itself! I noticed that there is an event fired, but I hoped for a better solution – Jeanluca Scaljeri Apr 08 '14 at 19:06
`'select2:open'` is the event – greatgumz Jun 29 '18 at 20:54

MigratingCub · Answer 4 · 2017-12-21T21:59:55.307

8

As of Select2 4.0.6, this has been updated to the following

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

This will return true/false

Hope this helps!

edited Dec 21 '17 at 21:59

answered Dec 20 '17 at 19:15

MigratingCub

91
2
8

1

This returns "undefined" on jQuery v3.6.0, select2 v4.1.0. – Luke Sep 21 '21 at 12:49

score 2 · Answer 5 · answered May 16 '17 at 16:07

change is fired whenever an option is selected or removed.

select2:open is fired whenever the dropdown is opened. select2:opening is fired before this and can be prevented.

select2:close is fired whenever the dropdown is closed. select2:closing is fired before this and can be prevented.

select2:select is fired whenever a result is selected. select2:selecting is fired before this and can be prevented.

select2:unselect is fired whenever a result is unselected. select2:unselecting is fired before this and can be prevented.

score 0 · Answer 6 · edited Aug 04 '14 at 05:40

0

It's better to do this:

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

edited Aug 04 '14 at 05:40

alex

479,566
201
878
984

answered May 23 '14 at 10:42

fedda

216
4
7

score 0 · Answer 7 · answered Sep 02 '15 at 13:53

0

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

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

answered Sep 02 '15 at 13:53

Robin

64
1
1
6

score -1 · Answer 8 · answered May 08 '17 at 07:38

-1

It works perfectly.

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

answered May 08 '17 at 07:38

Mahfuzur Rahman

1,497
18
23

How to check if dropdown is open in Select2?

8 Answers8