如何将样式应用于“选择”中当前选定的选项元素？

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/