'How to add select2 dynamically with classname?

I want to add new row with select2 instance by class name. It create a new row with select but cannot click for some reason.

          var maxGroup = 10;
          //add more fields group
          $(".addMore").click(function() {
            if ($('body').find('.fieldGroup').length < maxGroup) {
              var fieldHTML = '<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
              $('body').find('.fieldGroup:last').after(fieldHTML);
            } else {
              alert('Maximum ' + maxGroup + ' groups are allowed.');
            }
          });

          //remove fields group
          $("body").on("click", ".remove", function() {
            $(this).parents(".fieldGroup").remove();
          });

          //select2
          $(".selUser").select2();
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<div class="form-group fieldGroup">
  <select class='selUser' style='width: 200px;'>
    <option value='0'>-- Select User --</option>
    <option value='1'>Yogesh singh</option>
    <option value='2'>Sonarika Bhadoria</option>
    <option value='3'>Anil Singh</option>
    <option value='4'>Vishal Sahu</option>
    <option value='5'>Mayank Patidar</option>
    <option value='6'>Vijay Mourya</option>
    <option value='7'>Rakesh sahu</option>
  </select>
  <a href="javascript:void(0)" class="btn btn-primary addMore w-100">+ Add</a>

</div>

<div class="form-group fieldGroupCopy" style="display: none;">
  <select class='selUser' style='width: 200px;'>
    <option value='0'>-- Select User --</option>
    <option value='1'>Yogesh singh</option>
    <option value='2'>Sonarika Bhadoria</option>
    <option value='3'>Anil Singh</option>
    <option value='4'>Vishal Sahu</option>
    <option value='5'>Mayank Patidar</option>
    <option value='6'>Vijay Mourya</option>
    <option value='7'>Rakesh sahu</option>
  </select>
  <a href="javascript:void(0)" class="btn btn-danger remove w-100">- Remove</a>
</div>

For Fiddle please click here : https://jsfiddle.net/Laucy3qe/1/

javascripthtmljquery-select2


Solution 1:[1]

Since your hidden template copy already has the class selUser, it is initialised as a Select2 on page load as well. But Select2 makes copies of the <select> to add the functionality and styling it provides, so what you see is not the plain HTML select you started with. So it is maybe not surprising then that copying the original pre-select2 HTML, which has already been initialised as a Select2, to a new location does not work as expected.

Just keep it simple:

  • Remove the selUser class from your hidden copy, so it is not initialised as a Select2 on page load;

  • Initialise the copy as a Select2 after you update and insert it;

Done. If you need it to have the selUser class, just add it at the same time:

$('body').find('.fieldGroup:last').find("select").addClass('selUser').select2();

Here's a (simplified) working snippet:

// Initialise selects which exist on page load
$(".selUser").select2();

//add more fields group
$(".addMore").click(function() {
    var fieldHTML = '<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
    $('body').find('.fieldGroup:last').after(fieldHTML);
    $('body').find('.fieldGroup:last').find("select").select2();
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<div class="fieldGroup">
  <select class='selUser'>
    <option value='0'>-- Select User --</option>
    <option value='1'>Yogesh singh</option>
    <option value='2'>Sonarika Bhadoria</option>
    <option value='3'>Anil Singh</option>
    <option value='4'>Vishal Sahu</option>
    <option value='5'>Mayank Patidar</option>
    <option value='6'>Vijay Mourya</option>
    <option value='7'>Rakesh sahu</option>
  </select>
  <a href="javascript:void(0)" class="addMore">+ Add</a>
</div>

<div class="fieldGroupCopy" style="display: none;">
  <select class=''>
    <option value='0'>-- Select User --</option>
    <option value='1'>Yogesh singh</option>
    <option value='2'>Sonarika Bhadoria</option>
    <option value='3'>Anil Singh</option>
    <option value='4'>Vishal Sahu</option>
    <option value='5'>Mayank Patidar</option>
    <option value='6'>Vijay Mourya</option>
    <option value='7'>Rakesh sahu</option>
  </select>
  <a href="javascript:void(0)" class="remove">- Remove</a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Don't Panic

Related Questions