htmlのselectでoption毎に色を変更した際、選択中のoptionには色が反映されない

FireFox,chromeなどでは以下selectボックスを操作した際、
プルダウンリスト内には色が表示されているが、
選択後、選択中の「項目１」の色にはならずデフォルトの黒になってしまいます
選択中の項目にも色を反映させるにはどうしたら良いでしょうか？

HTMLタグ

<select>
 <option style="color:yellow;" selected>項目１</option>
 <option style="color:orange;">項目２</option>
 <option style="color:green;">項目３</option>
 <option style="color:cyan;">項目４</option>
</select>

kei344

2017/11/01 03:13

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

もっと簡単にいけると思ったのですがうまくデータが拾えないので
姑息ですがこうしてみてはどうでしょう？

javascript
1$(function(){
2  $('select').on('change',function(){
3    $(this).css('color',$(this).find('option:selected').get(0).style.color);
4  }).trigger('change');
5});

HTML
1<select>
2<option style="color:yellow;" selected>項目１</option>
3<option style="color:orange;">項目２</option>
4<option style="color:green;">項目３</option>
5<option style="color:cyan;">項目４</option>
6</select>

投稿2017/11/01 03:00