CODEWITHSUNDEEP
jquerytwitter-bootstrapselectbootstrap-select
user1049961
user1049961

Reputation: 2736

Bootstrap Select - reinitialize on dynamically added element

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?

Upvotes: 25

Views: 46898

Answers (2)

Seb33300
Seb33300

Reputation: 7556

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

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

Upvotes: 68

Manwal
Manwal

Reputation: 23836

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

Upvotes: 20

Related Questions