Login/Register
How to check if dropdown is open in Select2?
Asked Answered
Solved javascriptjqueryjquery-select2
E

8

14

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?

Essen answered 8/4, 2014 at 18:53 Comment(4)
it surely adds a class when it is open, debug it and see wich class it adds, then use some jquery ('#myselect theClassIFound') – Horselaugh
It just changes the html attribute style="display: block/none;" so play with that and use some jquery to detect that change – Horselaugh
I don't see anything happening on the select element. Here is a jsfiddle. – Essen
I am not sure why fiddles does not show it but if you debug your browser you will see it – Horselaugh
K
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.

Knowing answered 8/4, 2014 at 19:2 Comment(2)
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 – Essen
'select2:open' is the event – Jacy
U
19

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
});
Utricle answered 19/6, 2015 at 19:40 Comment(2)
select2:close to do the opposite – Nagana
Does not work for multiple – Sleety
R
14

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.

Randeerandel answered 28/8, 2015 at 17:58 Comment(1)
$('#mySelect').data('select2') is not available on jQuery v3.6.0, select2 v4.1.0. – Silken
K
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.

Knowing answered 8/4, 2014 at 19:2 Comment(2)
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 – Essen
'select2:open' is the event – Jacy
I
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!

Ihab answered 20/12, 2017 at 19:15 Comment(1)
This returns "undefined" on jQuery v3.6.0, select2 v4.1.0. – Silken
B
2

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.

Bushido answered 16/5, 2017 at 16:7 Comment(0)
M
0

It's better to do this:

var select2 = $('#selectorname').data('select2');
if (select2.opened()) {
        //do it
    } else {
        //dont do it
    }
Mertz answered 23/5, 2014 at 10:42 Comment(0)
J
0

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

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

Joshuajoshuah answered 2/9, 2015 at 13:53 Comment(0)
B
-1

It works perfectly.

$(".select2-container").is(":visible")
Bandanna answered 8/5, 2017 at 7:38 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.