3

I'm using bootstrap-select/selectpicker for several different drop-down lists on one page. The box for each list displays the title for the selected item, which is the first option. My goal is to change the color displayed, such as to red, for any other options that become selected (not the first in each list). Users could then easily see if changes or selections have been made. (Each change triggers an update to part of the page.) Is this possible?

<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>
4

1 回答 1

2

Have you tried using this feature: http://silviomoreto.github.io/bootstrap-select/examples/#custom-content?

Here is a snippet adapted to your case:

<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>

or if you prefer a jsfiddle: https://jsfiddle.net/beaver71/5mcvLzar/7/

于 2017-12-13T09:46:37.257 回答