ブートストラップセレクトを使用すると、オプションが変更または選択されたときにテキストの色が変わります。

Question

1ページにいくつかの異なるドロップダウンリストを表示するために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/