Getting all select2 instance in DOM

Question

Im trying to unbind keypress when select2 is focus, this seems to work

 $('#someId').on('select2-focus',function(){
    $(document).unbind('keypress');
});

but i want to get all select2 instance, i have tried

 $('.select2').on('select2-focus',function(){
    $(document).unbind('keypress');
});

but it is not working, i dont want to add ".custom_class" in each select2 i have in my page. can someone help me on this one? Thanks in advance.

Answer 1

In case anyone was still interested in the answer for the original question, i.e., „Getting all select2 instance in DOM“:

// The $element can be a narrower scope, or the entire document.
$element = $(document);
$element.find('select').each(function (i, select) {
    var $select = $(select);

    // Make sure that the select has Select2.
    if($select.hasClass("select2-hidden-accessible")) {
         // Perform your action, e.g.:
         $select.on('select2-focus',function(){
             $(document).unbind('keypress');
         });
         // You can also use the console for debugging:
         // console.log($select);
    }
});

The $select.hasClass("select2-hidden-accessible") check is taken from the original docs: https://select2.org/programmatic-control/methods#checking-if-the-plugin-is-initialized

But notice, that the 'select2-focus' event might not exist anymore, as it is not listed here: https://select2.org/programmatic-control/events . You should be able to use $select.find('.select2-selection__rendered').on('focus', function ...), but I did not test that.

For a working example of how this can be used, see my jsfiddle for a Select2 issue. Notice the function unobscurePlaceholdersOfSelect2().

Answer 2

jQuery('.select2-container').each(function(i,el){
    $(el).data('select2').close()
})