bootstrap-select not working when .clone(true) in jQuery

[rougin]

Does bootstrap-select really support cloning? I've followed some snippets found in #157 and still it doesn't work. I've tried to include "true" in .clone() but it turns out that it will only affects the events of the original.

Here's the code. Let's assume that the id "packing" is a div containing input text boxes and a select. I want to prepend/append the clone to a div.

$('select').attr('data-live-search', 'true');
$('select').attr('data-style', 'form-control');
$('select').selectpicker();
function addformfield() {
        counter += 1;
        var packing = $('#packing');
        var clone = packing.clone();
        clone.prependTo('#product_field');
        clone.attr('id', 'packing_' + counter);
        $('select').selectpicker('refresh');
}

Here's also the JSFiddle: http://jsfiddle.net/rougin/N663T/2/

[KpjComp]

The way boostrap-select works is by converting a normal Select into a bootstrap-select,. And then mirrors any modifications. So all your actually doing is cloning the invisible normal select, and then the visible bootstrap-select. But all the javascript that's attached to these has not been cloned.

The way I would do it, first do your clone. Then remove the bootstrap-select that was created, and then re-initialize the normal cloned Select again..

eg->

 function addformfield() {
        counter += 1;
        var packing = $('#packing');
        var clone = packing.clone();
        clone.appendTo('#product_field');
        clone.attr('id', 'packing_' + counter);
        clone.find('.bootstrap-select').remove();
        clone.find('select').selectpicker();
    }

And jsFiddle -> http://jsfiddle.net/N663T/20/

[rougin]

Wow. Your work saved me a lot of time. I really appreciate it. Thanks! :D

[nikhidas26]

Thank you so much! I have been trying hard to find a solution for this !!

[carvalhothiago]

Thank you man!

[joejordanbrown]

I came across this problem but if you're using the latest version, the select is placed inside the .bootstrap-select element for HTML5 error handling purposes. The remove() also removes the select, a work around is:

Instead of:
clone.find('.bootstrap-select').remove();

Use:
clone.find('.bootstrap-select').replaceWith(function() { return $('select', this); });

This will replace the .bootstrap-select element with the select element that it contains inside,

Just thought I'd share in case anyone has the same problem.

[JihanZhuang]

Use:clone.find('.bootstrap-select').replaceWith(function() { return $('select', this); }); is useful ,thank you, @joejordanbrown

[falvarezh90]

Thanks! work for me :)

[diegolotero]

How to create delete button?

[jameswilliamknight]

I followed @joejordanbrown, but I am finding that my selection isn't preserved after cloning. Am I required to scan the copied selectpickers for their selection, and transfer these over to the cloned selectpickers?

[Surefyre]

I had to clone the select first before replacing, I assume it was perhaps being destroyed during the replace? In this example newref is my clone.

        var select = $(newref).find('select').clone();
        $(newref).find('.bootstrap-select').replaceWith($(select));

[agafforov]

Thanks!

[tooska]

Why can I work inside the bucle "find(select).each"? for I can to clone multiples selectpicker

[LuTheZy]

Have the same issue. When I use:
clone.find('.bootstrap-select').replaceWith(function() { return $('select', this); });
then the dropdown is hidden.

[LuTheZy]

Surefyre's suggestion worked....

[lechnerio]

Maybe one of you are able to hint what I'm doing wrong.

I clone the tr on button click. the selectpicker is initiated before the click. When I clone the table row first and then open the selectpicker I get an error. When I open the original picker and then the cloned one, I don't get an error but the dropdown is referencing to the first select box.

Error: bootstrap-select.min.js:8 Uncaught TypeError: Cannot set property '_menu' of undefined

Basically this is the code I'm working with:

var $clone = $tr.clone(true,true).addClass("clonedrow"+ $trname).removeClass('notDeletable');
$clone.find('.selectpicker').attr('id', 'selpicker_' + counterSelectSym);
$clone.find('.selectpicker').replaceWith(function() { return $('select', this); });
$clone.find('.selectpicker').selectpicker('refresh');
$clone.find('.btn-tblrmv').attr('disabled', false);
$tr.after($clone);

I tried to work with unique IDs as well, but it didn't work as well.

[DeshuklaS]

@LuTheZy : yes even i was facing this issue after replace with but later i found that you need to add one more line of code something like this.

cloned .find('.selectpicker').selectpicker('render');

.selectpicker('render')

You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programatically change any underlying values that affect the layout of the element.

Hope this helps you. If you have already resolved the error, then I am sorry for posting it late.

[AnthonyGhizzo]

Good ! Thx

[NibyP]

I came across this problem but if you're using the latest version, the select is placed inside the .bootstrap-select element for HTML5 error handling purposes. The remove() also removes the select, a work around is:

Instead of: clone.find('.bootstrap-select').remove();

Use: clone.find('.bootstrap-select').replaceWith(function() { return $('select', this); });

This will replace the .bootstrap-select element with the select element that it contains inside,

Just thought I'd share in case anyone has the same problem.

The select picker worked, but the onchange event not working.

[yaakovLowenstein]

I had to clone the select first before replacing, I assume it was perhaps being destroyed during the replace? In this example newref is my clone.

        var select = $(newref).find('select').clone();
        $(newref).find('.bootstrap-select').replaceWith($(select));

This!!!!
Thank you ! I spent so long trying different things, and I saw the code with the replace but that just didn't work and finally tumbled upon your comment and that did the trick!

[Virus5600]

I came across this problem but if you're using the latest version, the select is placed inside the .bootstrap-select element for HTML5 error handling purposes. The remove() also removes the select, a work around is:

Instead of: clone.find('.bootstrap-select').remove();

Use: clone.find('.bootstrap-select').replaceWith(function() { return $('select', this); });

This will replace the .bootstrap-select element with the select element that it contains inside,

Just thought I'd share in case anyone has the same problem.

This perfectly helps me out! It doesn't even break nor change your current value if your remove the bootstrap select so it is definitely a life saver