Select2 Initialize select after appending data to existing select

Question

In my select2 select, i need to append li after document is ready, and after appending, how can i reinitialize select2. If I once close and again open the select, the appended data are selectable but not as soon as i append. How can i reinitialize it.

Answer 1

You have to destroy the select2 on these elements and then reinitialize it.

$("select").select2("destroy").select2();

Answer 2

Thanks to @Mivaweb for answer above ^

So if I use:

$("select").select2("destroy").select2();

then I'm getting following issue as some guys in comments on answer above:

The select2('destroy') method was called on an element that is not using Select2

But it does not mean that it is not working, it works, but need to update approach a bit.

Working solution for me:

STEP1: destroy existing select2 instances

STEP2: update options or select

STEP3: and now init new select2 instances

For example:

$(".select2me-filter").select2("destroy");

... Here do option updates you need

$(".select2me-filter").select2();