7

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/

kostepanych
  • 2,229
  • 9
  • 32
  • 47
  • no it's not? The second selectpicker is empty (as per `.remove()`) (?) – Unamata Sanatarai Mar 10 '17 at 08:46
  • @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 – niceman Mar 10 '17 at 08:52

3 Answers3

4

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

Garima Jain
  • 117
  • 1
  • 8
0

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/

Unamata Sanatarai
  • 6,475
  • 3
  • 29
  • 51
  • your method did work, but why ? there aren't any event handlers nor data elements on the original ? – niceman Mar 10 '17 at 09:07
  • 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. – Unamata Sanatarai Mar 10 '17 at 09:20
  • But now I can't append new option: https://jsfiddle.net/v660Lb4p/15/. Why? – kostepanych Mar 10 '17 at 09:39
0

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);
        }
    });
Kmaj
  • 61
  • 3
  • 10