如何打开新克隆的 Bootstrap 选择字段？答案

【问题标题】：How can I open a newly-cloned Bootstrap select field?如何打开新克隆的 Bootstrap 选择字段？
【发布时间】：2018-11-19 21:11:34
【问题描述】：

我正在尝试克隆引导选择字段，并立即打开克隆。

下面的代码切换原始选择字段。

$('.selectpicker').selectpicker("toggle");

但是，当我尝试切换克隆的字段时，克隆的字段仅被选中，而不是打开。

此处示例：http://jsfiddle.net/jh4wztab/4/

如何在克隆后立即打开克隆的 bootstrap-select？

HTML

<div id="jurisdictionpicker">
  <select class="selectpicker jurisdiction" data-live-search="true" data-size="8" id="jurisdiction_">
    <option>Philly</option>
    <option>DC</option>
    <option>New York</option>
  </select>
</div>

<BR><BR><BR><BR><BR><BR><BR><BR>

<button id="clonejurisdiction">Clone</button>
<B>Cloned version:</B>
<div class="juris_name">
</div>

jquery：

$('.selectpicker').selectpicker("toggle");

$(document).on("click", "#clonejurisdiction", function() {
  addselectpicker();
});

function addselectpicker() {
  var clone = $('#jurisdictionpicker').clone();
  clone.find(".selectpicker").attr("id",'jurisdictionpicker2');
  clone.find("[data-id='jurisdiction_']").remove();
  clone.appendTo(".juris_name");
  clone.find('.selectpicker').selectpicker("toggle");
}

【问题讨论】：

部分问题可能是您创建的重复 ID。使用递增或其他方式来保持它们的唯一性。
别以为就是这样。即使我更改了 div ID，它也不起作用......而且，正确的克隆正在突出显示（因此切换至少突出显示该字段）......但它没有切换

标签： javascript jquery twitter-bootstrap bootstrap-4 bootstrap-select

【解决方案1】：

如果您在超时中包装东西似乎可以工作。也许插件需要时间来完成它的工作。

$('.selectpicker').selectpicker("toggle");
var index = 1;

$(document).on("click", "#clonejurisdiction", function() {
  addselectpicker();
});

function addselectpicker() {
  var clone = $('#jurisdictionpicker').clone();
  clone.attr('id', 'jurisdictionpicker' + index);
  clone.find(".selectpicker").attr("id", 'jurisdictionpicker' + index);
  index++;
  clone.find("[data-id='jurisdiction_']").remove();
  clone.appendTo(".juris_name");

  setTimeout(function() {
    clone.find('.selectpicker').selectpicker("toggle");
  }, 0);
}

Demo

【讨论】：