How dynamically duplicate a select tag that is converted to select2.js?

Question

I am trying to use select2 in my project.

In the following screenshot, I want to duplicate the social media section (include select2, input and remove btn) dynamically after a user clicks on the ADD More button:

To avoid conflict, I am calling destroy event for all select2 at the beginning of the click event. Then, I will duplicate the elements. Then, I will re-initialize select2. But, it will always just convert one select to select2.

In the following screenshot, you can see duplicated selects are not converted to select2:

The following snippet code shows the problem:

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.selection').select2();
});

function duplicate_select ()
{
    //Destroy all active select2
    $(".selection").each(function (index, value) {
        var temp_selecte2 = $(value).select2();
        temp_selecte2.select2('destroy');
    });

    //Get First Select Node that I want to duplicate
    var first_node = $('.selection').first().prop('outerHTML');
    
    //Add new node to the body
    $('body').append(first_node);
    
    
    //Re-initialize all select2
    $(".selection").each(function (index, value) {
        var temp = $(value).select2();
        //temp.select2();
    });
    
    //Following codes is not working too
    //$(".selection").select2();
}
</script>

</body>
</html>

Can you please guide me how I can solve this problem and Re-initialize all duplicated select elements?

maybe this can help https://stackoverflow.com/a/29972853/1113766 — Juan, Feb 20 '19 at 00:12
Thank you @JuanCastillo but it doesn't help. especially because here I want to duplicate an exist select2, but there he want to add new DOM as a select2 — Reza Amya, Feb 20 '19 at 08:41

luiscla27 · Accepted Answer · 2019-02-20T14:56:55.703

The issue occurs because Select2 requires the select tag to be unique, the select2() method identifies this by using an attribute called data-select2-id, the only thing you need to do is modify that attribute.

Your problem can be fixed by either removing the attribute or setting a unique one. To set unique one just add the line temp.attr('data-select2-id', new Date().getTime()), but the recommended way is to remove it temp.removeAttr('data-select2-id')

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.selection').select2();
});

function duplicate_select ()
{
    //Destroy all active select2
    $(".selection").each(function (index, value) {
        var temp_selecte2 = $(value).select2();
        temp_selecte2.select2('destroy');
    });

    //Get First Select Node that I want to duplicate
    var first_node = $('.selection').first().prop('outerHTML');
    
    //Add new node to the body
    $('body').append(first_node);
    
    
    //Re-initialize all select2
    $(".selection").each(function (index, value) {
        var temp = $(value);
        temp.removeAttr('data-select2-id');
        // temp.attr('data-select2-id', new Date().getTime()); // <-- this works too
        temp.select2();
    });
}
</script>

</body>
</html>

How dynamically duplicate a select tag that is converted to select2.js?

1 Answers1