Bootstrap selectpicker is duplicated after refresh in cloned div

Question

I have a bootstrap selectpicker:

<div id="maindiv">
  <div class="hidden">
     <select class="form-control selectpicker communitySelect " multiple="true">
        <option selected value="0">All Communities</option>
     </select>
  </div>
</div>

I try to clone this hidden div and try to add/remove selectpicker options in cloned div:

 var $pickerdiv = $("div.hidden").clone();
 $pickerdiv.removeClass("hidden");
 $("#maindiv").append($pickerdiv);

 var $communitySelector = $pickerdiv.find(".selectpicker");
 $communitySelector.selectpicker();
 $communitySelector.find('option').remove();
 $communitySelector.selectpicker('refresh');

But after selectpicker refresh method it is duplicated on UI: https://jsfiddle.net/v660Lb4p/8/

So how to resolve this?

RESOLVED: Bootstrap selectpicker plugin applied automatically to elements with selectpicker class. So I removed this class and... its working now! https://jsfiddle.net/v660Lb4p/16/

Chincapin

no it's not? The second selectpicker is empty (as per .remove()) (?) – Gilding

@UnamataSanatarai the second selectpicker is empty and the first one isn't hidden, OP is expecting clone() to return a clone of the object so cloneddiv.removeClass("hidden") shouldn't affect the original div – Airlie

Answer 1

We need to change selectpicker class to another class name so that this issue has been resolved. I also work with bootstrap-select and found this issue because of selectpicker("refresh"). so I changed class name and it is working fine. :-)

This is already reported on bootstrap-select github repository. https://github.com/snapappointments/bootstrap-select/issues/1413

Greensickness

Answer 2

When you clone an object, you may pass additional parameters as per documentation: https://api.jquery.com/clone/#clone-withDataAndEvents

A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.

So my suggestion is to use the following line:

 var $pickerdiv = $("div.hidden").clone(true);

https://jsfiddle.net/v660Lb4p/13/

Gilding

your method did work, but why ? there aren't any event handlers nor data elements on the original ? – Airlie

You are cloning a JS-Selectpicker, not pure HTML. So all properties are still hooked up. If you clone data and events, then you get a cloned version, not a mirror version. – Gilding

But now I can't append new option: jsfiddle.net/v660Lb4p/15. Why? – Chincapin

Answer 3

This is a shame it still hasn't been fixed in 2022! BTW, the following worked for me, so I hope this can help someone else as well:

    var refName = $.trim( $('#ref_name').val() );

    $.ajax({
        method: 'POST',
        url: "{{ route('myroute') }}",
        data: {
            'name' : refName,
             _token: '{{ csrf_token() }}'
        },
        success: function(results){

/*  ---------------     Here is the main part ----------------*/
            $('#my-selectpicker').selectpicker("destroy");

            // remove all options of the select element
            $('#my-selectpicker option').each(function() {
                $(this).remove();
            });

            $.each(results, function( index, value ) {
                $('#reference').append('<option value="' + value.id + '">' + value.name + '</option>');
            });

            $('#my-selectpicker').addClass('selectpicker').selectpicker("render");

/*  -------------     Here is the main part ---------------------*/
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });

Grane