Javascript 选项所选文本颜色

我有一个带有几个选项的HTML选择表单

我想修改文本选项的颜色，但仅限于某些选项。在我下面的提琴中，我修改了星期二选项的颜色，但只有在向下滚动选项时才能看到修改。 如果选择了星期二的特定颜色，即在选项顶部，我如何使其也可见

小提琴：

代码：

.表格管制{ 颜色：蓝色； } .选定{ 颜色：红色； } 日期 星期一 星期二 星期三 星期四 更新的JSFIDLE

jQuery：

$select option.css颜色，蓝色

此行重置以前的颜色

$this.findoption:selected.css颜色，红色

---

这是选择框所选选项的颜色行。

这里有一种方法，它保留每个选项的单独颜色，并将所选顶部设置为完全相同的颜色

更新

由于某些原因，Firefox和Edge/IE都无法获得option元素的实际样式，因此我想出了这个肮脏的把戏，在select和option元素上都设置了一个数据颜色属性，当在某个选项上找到该属性时，将使用该属性，否则将使用select数据颜色的默认值。 函数selchangedel{ var col=el.options[el.selectedIndex].getAttribute'data-color'； 如果上校{ el.style.color=col； }否则{ el.style.color=el.getAttribute'data-color'； } } //运行一次以设置负载 selchangeddocument.querySelector'.form控件' .表格管制， .表单控件选项{ 颜色：蓝色； } .form控件选项[data color='090']{ 颜色：090； } .form控件选项[data color='f00']{ 颜色：f00； } .form控件选项[data color='00f']{ 颜色：00f； } .form控件选项[data color='0ff']{ 颜色：0ff； } 日期 星期一 星期二 星期三 星期四

---

可能与@adeneo的解决方案类似，文本只有在使用firefox时才可见。@michltm使用肮脏的技巧更新，因为FF显然没有从选项元素返回正确的颜色

$(function(){
    $("select").on("change", function(){
    $("select option").css("color", "blue");
    $(this).find("option:selected").css("color", "red");
  })
})