javascript - 更改 Bootstrap 选择的边框颜色(btn 类)

Question

我正在使用这个库:https://developer.snapappointments.com/bootstrap-select/但我不能在选择时改变它的行为。例如

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

其中 selectpicker 是创建此结构的键:

<button type="button" class="btn dropdown-toggle btn-new" data-toggle="dropdown" role="button" data-id="blabla" title="Mustard" aria-expanded="true">
<div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Mustard</div></div> 
</div>
</button>

所以，主要是，库在选择(存在但隐藏)上创建了一个按钮。我想要的是，当我选择列表中的一项时，边框颜色(按钮的而不是选择的)在 #BF69B2 中更改颜色 我试过这样:

document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "#BF69B2";

但没有成功。有什么想法吗？

Answer 1

您正在尝试检索具有类 btn dropdown-toggle btn-default 的元素，但在模板中您有另一个类:btn dropdown-toggle btn-new。

改变

document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "#BF69B2";

到

document.getElementsByClassName("btn dropdown-toggle btn-new")[0].style.borderColor = "#BF69B2";