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 に答える