選択した選択ボックスのオプションを色付きに保つ方法はありますか？

Question

私がしているのは、選択したオプションの色をそのままにして、選択ボックスに表示することだけです。

<div class="controls col-sm-2"> 
    <select class="form-control"> 
    <option>SELECT</option> 
    <option style="color:red;background:red">RED</option> 
    <option style="color:blue;background:blue">BLUE</option> 
    <option style="color:gold;background:gold">GOLD</option> 
    <option style="color:orange;background:orange">ORANGE</option> 
    <option style="color:green;background:green">GREEN</option> 
    </select> 
</div> 

カラーバーはドロップダウンに表示されますが、選択ボックスで選択すると消えます。選択ボックスに表示する色を維持する方法はありますか？これはミッションクリティカルなものではありませんが、スタイリングを維持する方法があると思いました。

Answer 1

可能なマークアップの両方にいくつかの調整で：

<div class="controls col-sm-2"> 
    <select class="form-control"> 
    <option value="">SELECT</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="gold">GOLD</option> 
    <option value="orange">ORANGE</option> 
    <option value="green">GREEN</option> 
    </select> 
</div> 

を... CSS：

select, option { 
    background-color: #fff; 
} 

select.red, 
option[value='red'] { background-color: red; } 

select.blue, 
option[value='blue'] { background-color: blue; } 

select.gold, 
option[value='gold'] { background-color: gold; } 

select.orange, 
option[value='orange'] { background-color: orange; } 

select.green, 
option[value='green'] { background-color: green; } 

残念なことに、あなたが後になっている動作を取得するには、Jav aScript（jQueryの味は次の）：これはそれぞれ、すべてのページの<select>要素に影響しますので、あなたは、例えば、特定のクラス（例えば）で色ドロップダウンバリアントをターゲットにすることが

// every time we change the selection in the dropdown ... 
$('select').on('change', function() { 
    $(this) 
     // clear any previous selection defined in the class 
     .attr('class', 'form-control') 
     // now add the selected value as an additional class (which we can target via CSS) 
     .addClass($(this).children(':selected').val()); 
}); 

注意select.colour-dropdown。

デモはhttp://www.bootply.com/ppZL9u1FAOで利用できます。

Answer 2

私はjQueryのを使用して、あなたの特定のケースのための答えを持っている可能性があります（厳密には推奨されていないが、）

$(".form-control").change(function(){ 

$(this).css("background-color", $(this).val()); 

});