Tukukkk

I'm trying to clone a bootstrap select field, and open the clone immediately.

The code below toggles the original select field.

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

However, when I try to toggle the cloned field, the cloned field is only selected, not opened.

Example here: http://jsfiddle.net/jh4wztab/4/

What can I do to have the cloned bootstrap-select open up immediately after cloning?

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

}

Seems to work if you wrap things in a timeout. Maybe the plugin needs time to do its thing.

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