Odtnhj

When I clone a bootstrap-select dropdown, the cloned dropdown seems to offset selections by 1. I.e., if I click the second option, the first one is selected.

For example:

• If I click "New Castle" in the original dropdown, then "New Castle" is selected




• If I click "New Castle" in the cloned dropdown, then "Kent" is selected

The error I get is:

bootstrap-select.js:2727 Uncaught TypeError: Cannot read property 'firstChild' of undefined

Why might this be happening?

A JSFiddle of the error is here: http://jsfiddle.net/jh4wztab/1/

Below is my code:

var count = 2;
$(document).on("click", "#clonejurisdiction", function() 
 addselectpicker(count);
 count++;
);

 function addselectpicker(juriscount) 
 juriscount = parseInt(juriscount)
 var picker = $('#jurisdictionpicker');
 var clone = picker.clone();
 var pickercount = juriscount + 1;
 clone.attr("id",'jurisdiction' + juriscount);
 clone.find(".selectpicker").attr("id",'jurisdictionpicker' + juriscount);
 clone.find("[data-id='jurisdiction_']").hide();
 clone.appendTo(".juris_name");
 clone.find('.selectpicker').selectpicker();
 clone.find(":input").attr("placeholder", "Enter a State, County");

 

HTML

<div id="jurisdictionpicker">
<select class="selectpicker jurisdiction" data-live-search="true" data-size="8" title="Select County, State" id="jurisdiction_">
<optgroup label="Popular">
 <option value='317'>Kent</option>
 <option value='318'>New Castle</option>
 <option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div class="juris_name">
</div>

Your main problem is when trying to do var clone = picker.clone();, that code is not actually cloning your original HTML markup for your select element. When using Bootstrap and writing your HTML markup for a select element like <select class="selectpicker">, when you use the class selectpicker the bootstrap javascript transforms your original markup into bootstraps select markup using parts of your original HTML. Once the DOM is rendered, the select element you are interacting with in your browser is not code that you originally wrote at all, it is boostrap's transformation of your HTML. So when you trying to clone() the bootstrap select element and then calling selectpicker() on it, it was trying to force bootstrap to transform HTML that was not in a state that it expected it to be to transform it, and was causing your unexpected behavior.

One way to solve this problem is to make your original HTML markup reusable. An easy way to do this is templating. When doing this you can get your template and add whatever view data you need to it and then have bootstrap transform your template HTML on the fly using selectpicker()

Here is a modified version of you originally posted code using Mustache.js for templating purposes. This performs what you wanted without your original select picker bug:

Here is the updated JSFiddle.

javascript:

var count = 1;
$(document).ready(function() 
 $("#someDiv").append(getJurisdictionPicker(count));
);

$(document).on("click", "#clonejurisdiction", function() 
 var picker = getJurisdictionPicker(count);
 $("#jurisName").append(picker);
);

function getJurisdictionPicker(juriscount) 
 var template = $("#jurisdictionPickerTemplate").html();
 var data = counter : juriscount ;
 var templatedText = Mustache.render(template, data);
 var temp = $(document.createElement("div")).html(templatedText);
 temp.find(".selectpicker").selectpicker();
 count++;

 return temp;

HTML:

<script id="jurisdictionPickerTemplate" type="text/template">
 <div id="jurisdictionpicker counter ">
 <select class="selectpicker" data-live-search="true" data-size="8" title="Select County, State">
 <optgroup label="Popular">
 <option value='317'>Kent</option>
 <option value='318'>New Castle</option>
 <option value='1859'>New York</option>
 </optgroup>
 <optgroup label="Jurisdictions">
 <option value='1'>Autauga</option>
 <option value='2'>Baldwin</option>
 <option value='3'>Barbour</option>
 <option value='4'>Bibb</option>
 </optgroup>
 </select>
 </div>
</script>

<div id="someDiv">
</div>
<button id="clonejurisdiction">
 Clone
</button>
<BR><B>Cloned version:</B>
<div id="jurisName">
</div>
<BR><BR>
If I click "New Castle" in the original dropdown, then "New Castle" is selected<BR>
If I click "New Castle" in the <B>cloned</B> dropdown, then "Kent" is selected<BR>