6

我有一个引导选择器：

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

但是在选择选择器刷新方法之后，它会在 UI 上重复： https ://jsfiddle.net/v660Lb4p/8/

那么如何解决这个问题呢？

已解决： Bootstrap selectpicker 插件自动应用于具有 selectpicker 类的元素。所以我删除了这个类并且......它现在可以工作了！ https://jsfiddle.net/v660Lb4p/16/

4

2 回答 2

4

我们需要将 selectpicker 类更改为另一个类名，以便解决此问题。我也使用 bootstrap-select 并发现这个问题是因为 selectpicker("refresh")。所以我改变了班级名称，它工作正常。:-)

这已在 bootstrap-select github 存储库中报告。 https://github.com/snapappointments/bootstrap-select/issues/1413

于 2019-01-04T11:38:45.170 回答
0

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

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

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

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

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

于 2017-03-10T09:03:24.963 回答