Как применить стиль к выбранному в данный момент элементу выбора в списке?

Question

Мне нужно установить style="color: #D4D4D4" на конкретные элементы опции select. Когда я устанавливаю <option value="TEST" style="color: #D4D4D4">TEST</option>, он успешно меняет стиль при распаковке опций. Однако выбранный в данный момент элемент опции в select (при выпадающем списке не расширен) по-прежнему имеет цвет шрифта по умолчанию. Как его изменить?

Update:

Спасибо! Но sel.onchange не отслеживает изменения, внесенные в атрибуты опции. Я использую jQuery для установки атрибута и необходимости немедленного отражения в выборе. Как я могу это сделать?

JQuery

$('.form-control option[value="' + $scope.environment + '"]').attr('style', 'color: #D4D4D4'); 

Answer 1

var sel = document.getElementById("sel"); 
 

 
function changeSelectColor(){ 
 
    sel.style.color = sel.options[sel.selectedIndex].style.color; 
 
} 
 

 
changeSelectColor(); // Do when ready 
 
sel.onchange = changeSelectColor; // And do it on change

<select id="sel"> 
 
    <option value="TEST1" style="color:red">TEST1</option> 
 
    <option value="TEST2" style="color:blue">TEST2</option> 
 
    <option value="TEST3" style="color:green">TEST3</option> 
 
</select>

Answer 2

Этот фрагмент кода должен сделать трюк

Jquery

$('#dropdownId').change(function(){ 
     $('#dropdownId').find(":selected").css('color', '#D4D4D4'); 
     $('#dropdownId').find("option:not(:selected)").css('color', '#000000'); 
    }); 

пример: http://jsfiddle.net/Lmda3tfc/