Is there any way to check if an element has jquery select2 already applied to it?

Question

I want to apply select2 to a bunch of jquery elements on the page that all have the same class name but it looks like if i call select2() on an element that already has had a select2() called on it then it blows up. here is my code

 $('.MyDropdowns').each(function (i, obj) {
    $(obj).select2({ width: "455px" });
});

so I want something like:

 $('.MyDripdowns').each(function (i, obj) {
    if (!$(obj).HasSelect2Initiatized)
    {
        $(obj).select2({ width: "455px" });
    }
});

Does anything like this exist?

Thymelaeaceous

Well it looks like it hides the element it's called on, so you could try if($(obj).is(":visible")) – Fright

that doesn't seem very fool proof as what if the element is hidden for other reasons? – Thymelaeaceous

Why would you call select2() twice? – Yiddish

@Thymelaeaceous Yea, scratch that idea - never used that plugin before, shame their plugin doesn't do what other plugins do and use an 'instance' option. sMr's answer below looks like the way to go – Fright

Answer 1

you can check if the element has select2 attribute

$('.MyDripdowns').each(function (i, obj) {
    if (!$(obj).data('select2'))
    {
        $(obj).select2({ width: "455px" });
    }
});

EDIT

As @Fr0zenFyr said in his comment for v4.0 you can use :

if (!$(obj).hasClass("select2-hidden-accessible"))

Gomez

This is still multiplying my selects after postbacks :/ – Tamper

what do you mean by postbacks? – Gomez

Server side processes, especially partial ones with UpdatePanel. – Tamper

at least for v4.0, if (!$(obj).hasClass(select2-hidden-accessible)) test should work. I don't think it works with data attribute anymore. – Hundredfold

@Hundredfold 's modification worked for me. Just remember hasClass accepts a string as the class name. – Sheenasheeny

Now it is in the official documentation select2.org/programmatic-control/… – Kielce

The data() check should work if you use data('select2-id'). – Playwright

Answer 2

Working solution:

$('.MyDripdowns:not([class^="select2"])').each(function (i, obj) {
    $(obj).select2({width: "455px"});
})

Links:

1. ^= attribute starts with selector
2. :not selector

Printing

Answer 3

Above answer is almost correct.
But it creates problem when we are adding elements dynamically on same page and applying select 2 to newly created element.
At that times selector has to be specified using not only class but also with input type. PFB reference code.

$('inputp[type="text"].MyDripdowns').each(curr_idx, curr_elem){
    //Check if select 2 is already applied or not
    if($(curr_elem).hasClass('.select2-offscreen')){
      //Select 2 is already applied to this element
    }
    else{
       //Apply Select 2 to this element 
    }
}

Dowery

Answer 4

...
curSelect.on( 'change', function() {
    curLength = curSelect.select2( 'data' ).length;
    if ( curLength ... ) {
        ...
    }
} );

Darg

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Pedi