Question

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

<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，在更改或选择选项时更改文本颜色

1 个答案: