select에서 현재 선택한 옵션 요소에 스타일을 적용하는 방법은 무엇입니까?

Question

style="color: #D4D4D4"을 select의 특정 옵션 요소로 설정해야합니다. <option value="TEST" style="color: #D4D4D4">TEST</option>을 설정하면 옵션 드롭 다운이 확장 될 때 스타일이 성공적으로 변경됩니다. 그러나 현재 선택된 옵션 요소 select (드롭 다운이 확장되지 않은 경우)은 기본 글꼴 색을 유지합니다. 그것을 바꾸는 방법?

업데이트 :

감사합니다! 그러나 sel.onchange은 옵션 속성 변경 사항을 추적하지 않습니다. jQuery를 사용하여 속성을 설정하고 select에 즉시 반영되도록 업데이트해야합니다. 어떻게해야합니까?

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/