Bootstrap select - add data-style attribute on click

Question

I'm using bootstrap and I'm looking to change the attribute "data-style" on my select boxes when they are invalid to "data-style=btn-danger" to highlight the invalid item.

So I would like this:

<select id="optionChoice" class="form-control select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

To be changed to this when left unselected:

<select id="optionChoice" class="form-control select data-style="btn-danger">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

To do this, I'm using a Jquery function when my submit button is clicked. It includes this line:

 $('#optionChoice').attr('data-style', 'btn-danger');

But that's not changing anything. If I manually add that attribute to the selectboxes, it shows properly, but I can't seem to get it added dynamically. I know the function is working because I also add a class to textboxes like so:

 $('#' + controltovalidate).addClass('error'); 

Which adds the class and changes the appearance of the textbox properly. But that error class won't work with the bootstrap select, so I'm really trying to get this data-style attribute working.

Any ideas how I can get this attribute to be added dynamically?

Answer 1

Apparently the bootstrap select is rendered in a way that you can't dynamically add a class using the usual .attr() call.

Instead you use this:

$('#optionChoice').selectpicker('setStyle', 'btn-danger');

More can be found here for those who need it: http://silviomoreto.github.io/bootstrap-select/