Bootstrap-select: setStyle second time fails

[cosmak]

In my code a change the style of a select button twice, as a result of some events. The first time the style changes whereas the second time fails.
An inspection to the DOM reveils that the second time the new style is appended to the first and therefore is ignored.

My code:
if (newset<1) {
$('.Dpar').selectpicker('val','OFF');
$('.Dpar').selectpicker('setStyle','btn-success'); }
else {
$('.Dpar').selectpicker('val',newset);
$('.Dpar').selectpicker('setStyle','btn-danger'); }
newset is first set to >1:

the newset is set to <1:

[pesek]

Can confirm this problem on 1.6.3.

Temporary workaround that might save someone some time: you can remove old styles using selectpicker('setStyle', 'class', 'remove') before adding the new class and then it works with no problem. Downside is, you probably need to remove every possible class that the option could have. Good news is, in most cases, you only use very few classes, so it's not that difficult.

So, working solution might look like the following:

select.selectpicker('setStyle', 'btn-danger', 'remove');
select.selectpicker('setStyle', 'btn-success', 'remove');
select.selectpicker('setStyle', 'btn-primary').selectpicker('refresh');

Probably more generic solution would be to read all appended classes first and then remove them specifically, or maybe even completely reseting the class attribute before using setStyle, however I do not have time to test it right now.

[lazlolazarous]

Note that _setStyle()_ can add/remove classes from the underlying _button_, but the outer _div_ classes are only ever added, never removed.
IE: if the dropdown initially is:

<div class="btn-group bootstrap-select">
    <button type="button" class="btn dropdown-toggle selectpicker" ...>

And you call:

    select.selectpicker(setStyle', 'btn-danger', 'add');
    select.selectpicker(setStyle', 'btn-danger', 'remove');

The outer _div_ will keep the 'btn-danger' class, and you cannot remove it using _selectpicker()_ (that I can find):

<div class="btn-group bootstrap-select btn-danger">
    <button type="button" class="btn dropdown-toggle selectpicker" ...>

This especially annoying when combining with angular _ng-hide_, as if you try to hide the dropdown, you cannot ever un-hide it.
IE, the _ng-hide_ class can never be removed from the _div_

[kpagnat]

Hi everyone,

I have the same bug as mentionned concernning the "ng-hide" class that cannot be removed.
The only thing I have found is to use $(input).closest("div").removeClass("ng-hide"); and $(input).closest("div").addClass("ng-hide");

Hope this bug can be fixed.

[lapat]

@pesek method doesn't work for me but I liked the idea.

[markovic-nikola]

I had the same problem, found a workaround:

$select.selectpicker('setStyle', 'btn-danger btn-warning btn-success', 'remove')
                            .selectpicker('setStyle', btnClass, 'add');