如何打开新克隆的 Bootstrap select 字段？

Question

我正在尝试克隆 bootstrap select 字段，并立即打开克隆。

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

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

但是，当我尝试切换克隆字段时，克隆字段仅 selected，未打开。

此处示例：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");
}

Answer 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

如何打开新克隆的 Bootstrap select 字段？

How can I open a newly-cloned Bootstrap select field?

javascript

jquery

twitter-bootstrap

bootstrap-4

bootstrap-select