chhorn soro
chhorn soro

Reputation: 209

Select2 on Clone Element not working

I have select with multiple select like this

<select class="js-example-basic-multiple" multiple="multiple"  style="width:100%">
    <option value="月曜日">月曜日</option>
    <option value="火曜日">火曜日</option>
</select>

And I initialize it like this

$(".js-example-basic-multiple").select2();

It's working perfectly , but the problem when I want to clone it and append to other.

var clone_temp = $(".js-example-basic-multiple").clone();
  $("#some_wrapper").append( clone_temp  );

It's only work for first element ,but for clone element not working. Please help!!!

Upvotes: 0

Views: 3801

Answers (2)

Cerlin
Cerlin

Reputation: 6722

Running clone_temp.select2(); after appending will initialize the plugin again.

Working Fiddle

Code which i used:

$('.js-example-basic-multiple').select2();
var clone_temp = $(".js-example-basic-multiple").clone();
$("#some_wrapper").append(clone_temp);
clone_temp.select2()

Upvotes: 4

DarkMukke
DarkMukke

Reputation: 2489

You need to do a deep clone to clone the data and events as well : https://api.jquery.com/clone/#clone-withDataAndEvents-deepWithDataAndEvents

var clone_temp = $(".js-example-basic-multiple").clone(true, true);
$("#some_wrapper").append( clone_temp  );

Upvotes: 0

Related Questions