jquery - 刷新后在克隆的div中复制了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>

我尝试克隆此隐藏的div，并尝试在克隆的div中添加/删除selectpicker选项:

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

但是在执行selectpicker刷新方法后，它会在UI上复制:
https://jsfiddle.net/v660Lb4p/8/

那么如何解决呢？

已解决:
Bootstrap selectpicker插件自动应用于具有selectpicker类的元素。因此，我删除了该类(class)，并且...现在可以正常工作!
https://jsfiddle.net/v660Lb4p/16/

最佳答案

我们需要将selectpicker类更改为另一个类名称，以便解决此问题。
我还使用bootstrap-select并由于selectpicker(“refresh”)发现了此问题。
所以我改变了类(class)的名字，它工作正常。 :-)

这已经在bootstrap-select github仓库上报告了。
https://github.com/snapappointments/bootstrap-select/issues/1413

Selectpicker

jquery - 刷新后在克隆的div中复制了Bootstrap selectpicker