25

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?

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
user1049961
  • 2,656
  • 9
  • 37
  • 69

2 Answers2

68

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

$(select).selectpicker('refresh');
Regolith
  • 2,944
  • 9
  • 33
  • 50
Seb33300
  • 7,464
  • 2
  • 40
  • 57
  • 1
    Anybody knows about some documentation for selectpicker? Link above gives 404 Error and I would need some list of methods. Thanks. – Enriqe Aug 24 '18 at 13:43
  • https://developer.snapappointments.com/bootstrap-select/ is the new link for documentation – DShah Feb 26 '19 at 10:12
20

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

Manwal
  • 23,450
  • 12
  • 63
  • 93