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

＆＃13;

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

＆＃13;

  <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>

＆＃13;

Answer 2

此代码段应该可以解决问题

JQUERY

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

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

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

2 个答案: