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