使用 bootstrap-select，在更改或选择选项时更改文本颜色

Question

我将 bootstrap-select/selectpicker 用于一页上的几个不同 drop-down 列表。每个列表的框显示所选项目的标题，这是第一个选项。我的目标是为任何其他被选中的选项（不是每个列表中的第一个）更改显示的颜色，例如更改为红色。然后，用户可以轻松查看是否进行了更改或选择。（每次更改都会触发部分页面的更新。）这可能吗？

<form id='submitCriteria' action='' method='post'>
    <select id='selLevel' class='selectpicker' name='levels'>
        <option title='Levels' value='No Preference' 
            selected = 'selected'>No Preference</option>
        <option title='Levels:<br>  1+' value=1 >1+ </option>
        <option title='Levels:<br>  2+' value=2 >2+ </option>
        <option title='Levels:<br>  3+' value=3 >3+ </option>
    </select>
    <select id='selGar' class='selectpicker' name='gar'> 
        <option title='Garage' value='No Preference' 
            selected = 'selected'>No Preference</option>
        <option title='Garage:<br>  1+' value=1 >1+ </option>
        <option title='Garage:<br>  2+' value=2 >2+ </option>
        <option title='Garage:<br>  3+' value=3 >3+ </option>
        <option title='Garage:<br>  4+' value=4 >4+ </option>
        <option title='Garage:<br>  5+' value=5 >5+ </option>
    </select>
</form>

Answer 1

您是否尝试过使用此功能：http://silviomoreto.github.io/bootstrap-select/examples/#custom-content？

这是适合您的情况的片段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>

<form id='submitCriteria' action='' method='post'>
    <select id='selLevel' class='selectpicker' name='levels'>
        <option title='Levels' value='No Preference' 
            selected = 'selected'>No Preference</option>
        <option title='Levels:<br><span class="label label-success">1+</span>' value=1 >1+ </option>
        <option title='Levels:<br><span class="label label-success">2+</span>' value=2 >2+ </option>
        <option title='Levels:<br><span class="label label-success">3+</span>' value=3 >3+ </option>
    </select>
    <select id='selGar' class='selectpicker' name='gar'> 
        <option title='Garage' value='No Preference' 
            selected = 'selected'>No Preference</option>
        <option title='Garage:<br><span class="label label-warning">1+</span>' value=1 >1+ </option>
        <option title='Garage:<br><span class="label label-warning">2+</span>' value=2 >2+ </option>
        <option title='Garage:<br><span class="label label-warning">3+</span>' value=3 >3+ </option>
        <option title='Garage:<br><span class="label label-warning">4+</span>' value=4 >4+ </option>
        <option title='Garage:<br><span class="label label-warning">5+</span>' value=5 >5+ </option>
    </select>
</form>

或者如果您更喜欢 jsfiddle：https://jsfiddle.net/beaver71/5mcvLzar/7/

使用 bootstrap-select，在更改或选择选项时更改文本颜色

Using bootstrap-select, change text color when option changed or selected

twitter-bootstrap

bootstrap-select

bootstrap-selectpicker