JavaScript

IE以外のブラウザでドロップダウンリストの各項目に色を付けたいとき

More than 5 years have passed since last update.
<select name="color">
<option style="color:black;" selected>選択してください</option>
<option style="color:red;"></option>
<option style="color:yellow;"></option>
<option style="color:blue;"></option>
</select>

InternetExplolerは選択後のselect要素自体の色も自動的に変更してくれるようですが、FirefoxやGoogleChromeではselect要素を直接操作しない限りデフォルト色のままになってしまうようです。
これを解決するためにJavaScriptド素人の私なりに思いついたのが以下のコードです。
既出だったら申し訳ないというか多分既出だと思いますが。

function changeColor() {
    var e = document.getElementById("color");
    e.style.color = e.options[e.selectedIndex].style.color;
}
<select name="color" id="color" onchange="changeColor()">
<option style="color:black;" selected>選択してください</option>
<option style="color:red;"></option>
<option style="color:yellow;"></option>
<option style="color:blue;"></option>
</select>

とりあえずGoogleChromeではこれで動作確認できました。
「こうしたほうがいい」等指摘があれば生暖かいコメントお願いします(((