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

【问题标题】：How to apply style to currently selected option element in select?如何将样式应用于选择中当前选定的选项元素？
【发布时间】：2014-11-05 09:58:49
【问题描述】：

我需要将style="color: #D4D4D4" 设置为select 的特定选项元素。当我设置<option value="TEST" style="color: #D4D4D4">TEST</option> 时，它会在选项下拉菜单展开时成功更改样式。但是select 中当前选择的选项元素（当下拉菜单未展开时）仍然具有默认字体颜色。如何改变它？

更新：

谢谢！但是sel.onchange 没有跟踪对选项属性所做的更改。我使用 jQuery 设置属性并且需要更新以立即反映在选择中。我该怎么做？

jQuery

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

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

这段代码 sn-p 应该可以解决问题

JQUERY

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

示例：http://jsfiddle.net/Lmda3tfc/

【讨论】：