Как я могу открыть недавно клонированное поле выбора Bootstrap? - PullRequest
Новая
       57

Как я могу открыть недавно клонированное поле выбора Bootstrap?

0 голосов
/ 20 ноября 2018

Я пытаюсь клонировать поле выбора начальной загрузки и немедленно открыть клон.

Приведенный ниже код переключает исходное поле выбора. 

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

Однако, когда я пытаюсь переключить клонированное поле, клонированное поле только выделяется, а не открывается.

Пример здесь: http://jsfiddle.net/jh4wztab/4/

Что я могу сделать, чтобы клонированный селектор начальной загрузки открылся сразу после клонирования?

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");
}

1 Ответ

0 голосов
/ 20 ноября 2018

Кажется, работает, если вы заверните вещи в тайм-аут.Может быть, плагину нужно время, чтобы сделать свое дело.

$('.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);
}

Демо

...