javascript - 选项选择的文字颜色

Question

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

我想修改文本选项的颜色，但仅限于某些选项。在我下面的 Fiddle 中，我修改了 Tuesday 选项的颜色，但修改仅在向下滚动选项时可见。 当选择特定颜色时，我如何才能让 星期二 也可见，即在选项的顶部？

fiddle :https://jsfiddle.net/bb61c412/280/

代码:

.form-control {
  color: blue;
}

.selected {
  color: red;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />

<form action="#" id="form" method="post" data-toggle="validator" style='text-align:center;'>
  <div class="form-inline">

    <select class="form-control" name="date">
      <option value="0">
        Date
      </option>
      <option value="1">
        Monday
      </option>
      <option value="2" selected class="selected">
        Tuesday
      </option>
      <option value="3">
        Wednesday
      </option>
      <option value="4">
        Thursday
      </option>

    </select>

  </div>

</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

更新的 Jsfiddle

Option selected text color

jQuery:

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

$("select option").css("color", "blue");

这一行重置了之前的颜色。

$(this).find("option:selected").css("color", "red");

这是为选择框的选定选项着色的行。