title: Bootstrap select - add data-style attribute on click
body: <p>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.</p>
  
  <p>So I would like this:</p>
  
  <pre><code>&lt;select id="optionChoice" class="form-control select"&gt;
  &lt;option&gt;Option 1&lt;/option&gt;
  &lt;option&gt;Option 2&lt;/option&gt;
  &lt;option&gt;Option 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>To be changed to this when left unselected:</p>
  
  <pre><code>&lt;select id="optionChoice" class="form-control select data-style="btn-danger"&gt;
  &lt;option&gt;Option 1&lt;/option&gt;
  &lt;option&gt;Option 2&lt;/option&gt;
  &lt;option&gt;Option 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>To do this, I'm using a Jquery function when my submit button is clicked. It includes this line:</p>
  
  <pre><code> $('#optionChoice').attr('data-style', 'btn-danger');
  </code></pre>
  
  <p>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:</p>
  
  <pre><code> $('#' + controltovalidate).addClass('error'); 
  </code></pre>
  
  <p>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.</p>
  
  <p>Any ideas how I can get this attribute to be added dynamically?</p>