1

我正在尝试修改一些现有代码。我想使用 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");

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

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

任何帮助表示赞赏:)

EDIT_01：

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

在此处输入图像描述

我们需要下拉列表看起来像 IE8 中的样子，如下所示。不知何故，这种风格没有被应用。

在此处输入图像描述

4

1 回答 1

1

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

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

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

if ($(opt).hasClass('station'))
  {
    $(opt).addClass('highlight');
  }
  
});
.highlight
  {
    color:red;
    background:yellow;
  }
<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>

于 2015-06-04T00:49:55.670 回答