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

Does bootstrap-select really support cloning? I’ve followed some snippets found in https://github.com/silviomoreto/bootstrap-select/issues/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/

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 20

Most upvoted comments

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.

+38

joejordanbrown on Jun 20, 2018

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/

+15

KpjComp on May 27, 2014

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));

Surefyre on Aug 12, 2017

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

JihanZhuang on Mar 5, 2016