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

Question

我需要设置 style="color: #D4D4D4"到 select 的特定选项元素.当我设置 <option value="TEST" style="color: #D4D4D4">TEST</option>展开选项下拉列表时，它会成功更改样式。但是当前选择的选项元素在select (当下拉列表未展开时)仍然具有默认字体颜色。怎么改？

更新:

谢谢!但是sel.onchange不跟踪对选项属性所做的更改。我使用 jQuery 来设置属性并且需要更新以立即反射(reflect)在选择中。我该怎么做？

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>