Bootstrap Select - reinitialize on dynamically added element

Question

I'm using Bootstrap Select (http://silviomoreto.github.io/bootstrap-select/) for displaying dropdown with Font-Awesome icons for each section of my website.

I added ability to add new sections - when clicked on add button, a new section (duplicate of previous section) is added. In this section, the Bootstrap Select doesn't work.

I tried to reinitilize it like:

var select = $('[name="section['+ numbersection +'][section_icon]"]');
$(select).selectpicker('destroy');
$(select).selectpicker({
  showIcon: false
});

That doesn't work though, as the detroy method doesn't seem to fire. Is there a way to reinitilize Bootstrap Select on dynamically added element?

Answer 1

You have to refresh your select as mentioned on the plugin page

$(select).selectpicker('refresh');

Answer 2

refresh()

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

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

Demo