Select2: Select2 doesn't work with Cloned <select>

[getvivekv]

Hi
I have observed that select2 doesn't work with a cloned tag.

For example, I have a select tag with two options

<select class="select">
<option>1</option>
<option>2</option>
</select>
<a href="#" id="click">Duplicate</a>

And then I have the jQuery code

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

This works fine, however what I am trying to do is to duplicate the drop down using jquery

clone()

$(function(){
     $("#click").click(function(){
          var newelement = $(".select").clone();
          $("body").append(newelement);
     }); 
});

The thing is that, it duplicates the html/css styles but the drop down is not working.
I understand that this is because select2 convert the

tag to more html/css code.
But is there any way I can get this cloned select tags work?

Do you know any workaround for this ?

[kevin-brown]

Hi @getvivekv,

I should start off by mentioning that while initializing Select2 against a class work, you will hit problems if you re-initialize Select2 using a class multiple times.

There are two ways of cloning Select2 and still making it work. One is to clone the original <select> and then initialize Select2 on it, and the other is to clone the <select> and Select2 instance after Select2 is initialized.

Initializing Select2 before

This is how you are currently doing it, where you are initializing Select2 and then cloning it. This is not the recommended way as it will most likely cause problems in the future (if not now).

clone()

When cloning elements with event handlers, such as Select2, it's recommended to pass in true as an argument to clone. This will force jQuery to clone the data and event handlers that Select2 has set up.

I understand that this is because select2 convert the tag to more html/css code.

Right, in order to clone Select2 you must clone both the original <select> element and the <div> element that Select2 generates.

Initializing Select2 after

This is the recommended way, where you clone the <select> element and then initialize Select2 afterwards on it.

var original = $(".js-select");
var clone = original.clone();
clone.select2();

This will guarantee that each Select2 instance is unique and will not interfere with each other.