Having multiple Select2 selects on a page, dynamically added by user

[m...@turkmenweb.net]

Hi all,

Ok this might sound odd, but for some reason I am not able to dynamically attach select2() on selects that are being added to page later, after uses presses a button to add more selects..

I've been using jquery's .on() event with no problems before, but with selects I guess there is sowething different, idk.

This is my code:

$(document).on('focus','select[rel=multiselect]',function(event){
$(this).select2();
});

What it does is - select2 activates on <select>s ONLY after I click on that select element, initially they are just plain selects. And after I click on a select, it first show me a regular plain select with options, and then makes it a select2 select..

Any ideas?

[m...@turkmenweb.net]

IN SHORT: How to apply .select2() to all future added select elements on a page?

[Igor Vaynberg]

this is more of a jquery/dom question. i would imagine you would add a
listener that listens to some kind of dom node added element and use
that to init select2.

-igor

> --
> You received this message because you are subscribed to the Google Groups "select2" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
> To post to this group, send email to sel...@googlegroups.com.
> Visit this group at http://groups.google.com/group/select2?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[m...@turkmenweb.net]

Thanks Igor for your reply.

You are right, it is more of a jQuery specific question. But the thing is that jQuery's event delagation function .on() doesn't want to work properly with .select2() .. it works with everything else fine, when adding elements on the fly .on() works for other libraries.. For some reason it doesn't work for .select2()

I thought this 'd be the best place to ask for help, as I am sure someone out there had fell into a similar situation when .seelct2() was added to dynamically created elements, and not only to elements that were present on the page in the first place, were in initial DOM.

[Igor Vaynberg]

$(document).on("DOMNodeInsertedIntoDocument", function(e) {...})

-igor

[m...@turkmenweb.net]

DOMNodeInsertedIntoDocument didn't work.

[Gustavo A. Gómez Cal Oncológicos]

<div class="float-left col-sm-3"> <select class="form-control" id="parentesco" name="parentesco[]" required></select></div>
<script>
      $('#parentesco*').select2({
        placeholder: 'Seleccionar paciente',
        ajax: {
          url: 'ajax_paciente.php',
          dataType: 'json',
          delay: 250,
          processResults: function (data) {
            return {
              results: data
            };
          },
          cache: true
        }
      });
     
</script>

[Abc Xyz]

When working with multiple dynamically added Select2 instances, the key issue is that Select2 needs to be initialized on each new element after it is added to the DOM, not before.

The correct approach:

$(document).on('DOMNodeInserted', function(e) {
    if ($(e.target).is('select')) {
        $(e.target).select2({
            placeholder: "Select an option",
            allowClear: true
        });
    }
});

Or better approach using event delegation:

$(document).on('click', '.add-select', function() {
    var newSelect = $('<select class="dynamic-select"><option>Option 1</option></select>');
    $('#container').append(newSelect);
    newSelect.select2({
        placeholder: "Choose option",
        width: '100%'
    });
});

3 important rules for dynamic Select2:

1. Always initialize Select2 AFTER element is added to DOM
2. Use unique IDs for each dynamic select element
3. Destroy existing Select2 instance before reinitializing — $(element).select2('destroy')

For destroying and reinitializing:

// Destroy first
$('.dynamic-select').select2('destroy');
// Then reinitialize
$('.dynamic-select').select2();

This pattern works reliably for any number of dynamically added selects. I use similar structured approaches when building dynamic data tables — for example restaurant food menu builders where multiple dropdown selectors are added dynamically by users choosing menu categories: https://longhornmenuonline.com

Hope this solves your dynamic Select2 issue!