Search code examples
jquerybootstrap-multiselect

Bootstrap multiselect cloning issue

I have a multiselect on one of my selects and it works fine when setup as detailed here, http://davidstutz.github.io/bootstrap-multiselect/.

I clone a div using the jquery clone method which contains this multiselect.

  $("select[id^=Test]").multiselect();

After cloning, the cloned select references the original select. I also change the ids of the cloned select to that is not the issue. I have tried the multiselect methods such as rebuild but it still doesn't work. I created a fiddle to show the issue. https://jsfiddle.net/zaa35zgt/3

Solution

  • Bootstrap multiselect alters the HTML of the containing div. It's not really a good idea to clone it the way you do since you will be cloning all the data and events as well. Instead you could clone the original select and then apply multiselect to it.

    Something like this (modified the fiddle slightly):

    $("select[id^=Test]").multiselect();

$($('[id*="btnClone"]')).on("click", function() {

     var clonedSelect = $('div[id^="clonedDiv"]').last().find('select').clone();

     var newDiv = $('<div></div>').append(clonedSelect);

     $('div[id^="clonedDiv"]').last().after(newDiv);

     newDiv.find('select').multiselect();

});