使用jQuery更改SelectMenu中特定选项的样式

Question

我正在尝试修改一些现有代码。我想使用jQuery来改变下拉列表中某些项的样式。

我的下拉列表结构如下：

<select name="dept" id="dept">
  <option value="01">DeptA</option>
  <option value="02">DeptB</option>
  <option value="03" class="station">DeptC</option>
  <option value="04" class="station">DeptD</option>
  <option value="05" class="station">DeptE</option>
  <option value="06" class="station">DeptF</option>
  <option value="07" class="station">DeptG</option>
  <option value="08">DeptH</option>
</select>

我希望能够更改class="station"（又名DeptC-G）选项的字体颜色或背景颜色。

我尝试了以下方法：

<script>
$(function() {    
  $( "#dept" ).selectmenu().selectmenu( "menuWidget" );
  /*$( "option" ).each(function() {
    if ( $( this ).hasClass("station") ) {
      //alert(this.text);
      $(this).addClass("testClass");
    }
  });*/
});
</script>

<style>
  .testClass
  {
    color:blue;
    background:pink;
  }
</style>

评论部分不起作用，它将执行警报部分，但样式从未应用过。

我尝试使用

$("#dept").selectmenu().selectmenu( "menuWidget" ).addClass("testClass");

但这会将样式应用于每个选项而不是特定选项。

我做了一些研究，我发现this从问题看起来与我正在寻找的非常相似。但是，我尝试了给定的解决方案，它们都不适合我。没有错误，只是没有应用样式。

感谢任何帮助：）

EDIT_01：

这就是它在IE11中的样子，基于原始选择的列表移位。 （我知道这是IE11渲染下拉列表的方式，但我们将改变它）

我们需要下拉列表看起来像IE8中的内容，如下所示。不知怎的，风格没有应用。

Answer 1

这是一个可能的解决方案：

＆＃13;

＆＃13;

var options = $('#dept').find('option');

$.each(options, function(i, opt){

if ($(opt).hasClass('station'))
  {
    $(opt).addClass('highlight');
  }
  
});

＆＃13;

.highlight
  {
    color:red;
    background:yellow;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dept" id="dept">
  <option value="01">DeptA</option>
  <option value="02">DeptB</option>
  <option value="03" class="station">DeptC</option>
  <option value="04" class="station">DeptD</option>
  <option value="05" class="station">DeptE</option>
  <option value="06" class="station">DeptF</option>
  <option value="07" class="station">DeptG</option>
  <option value="08">DeptH</option>
</select>

＆＃13;

＆＃13;

＆＃13;