Question

我有一个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类的元素。所以我删除了这个课程......现在正在工作！ https://jsfiddle.net/v660Lb4p/16/

Answer 1

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

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

Answer 2

克隆对象时，您可以根据文档传递其他参数： https://api.jquery.com/clone/#clone-withDataAndEvents

一个布尔值，指示是否应复制事件处理程序与元素。从jQuery 1.4开始，元素数据将被复制为好。

所以我的建议是使用以下行：

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

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

在克隆的div中刷新后，Bootstrap selectpicker会重复

2 个答案: