Initialising select2 created dynamically

Question

I have a select2 drop-down for which I provide a matcher function. It is initialised like this on initial page load:

jQuery(document).ready(function() {
             


        

Answer 1

I came across a similar situation recently but did it in a very usual way:

$(document).ready(function() {

 //function to initialize select2
  function initializeSelect2(selectElementObj) {
    selectElementObj.select2({
      width: "80%",
      tags: true
    });
  }


 //onload: call the above function 
  $(".select-to-select2").each(function() {
    initializeSelect2($(this));
  });

 //dynamically added selects

  $(".add-new-select").on("click", function() {
    var newSelect = $("option 1option 2");
    $(".select-container").append(newSelect);
    initializeSelect2(newSelect);
  });


});

  
    option1
    option2
  

  
    option1
    option2
  



  Add New Select

In case of the .load function find all the select elements which are to be initialized in the callback of load function and call initializeSelect2 on each of those select elements.

I hope this helps someone who is looking for a simple solution.