jquery - Bootstrap 选择 - 单击时添加数据样式属性

Question

我正在使用 bootstrap，并且希望在选择框无效时将其属性“data-style”更改为“data-style=btn-danger”以突出显示无效元素。

所以我想要这样:

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

未选择时更改为:

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

为此，我在单击提交按钮时使用 Jquery 函数。它包括这一行:

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

但这并没有改变任何事情。如果我手动将该属性添加到选择框，它会正确显示，但我似乎无法动态添加它。我知道该函数正在运行，因为我还向文本框添加了一个类，如下所示:

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

这会添加类并正确更改文本框的外观。但该错误类无法与 Bootstrap 选择一起使用，因此我真的试图让此数据样式属性正常工作。

有什么想法可以动态添加此属性吗？

Answer 1

显然， Bootstrap 选择的呈现方式使您无法使用通常的 .attr() 调用动态添加类。

相反，你可以使用这个:

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

有需要的人可以在这里找到更多内容:http://silviomoreto.github.io/bootstrap-select/