プルダウン 背景色の変更

質問

お世話になっております。
以前こちらで質問させていただき、またつまずいたので質問させてください。
何度も申し訳ございません。

現在、

<script type="text/javascript">
<!--
var bc = ["#FF0000","#00FF00","#0000FF","#FFFFFF"];
function chBackGround(e) {
e.style.backgroundColor=bc[e.selectedIndex];
}

window.onload = function() {
document.getElementById('key').style.backgroundColor=bc[0];

}
// -->
</script>
------------------------------------------------------------

html部分

<select id="key" name="key" onChange="chBackGround(this)">
<option style="background-color: #FF0000;">サンプル0</option>
<option style="background-color: #00FF00;">サンプル1</option>
<option style="background-color: #0000FF;">サンプル2</option>
<option style="background-color: #FFFFFF;">サンプル3</option>
</select>

としており、プルダウンで選ばれたカラーのスタイルを<select>タグに埋め込んでおります。
上記だと、この画面を初期表示時、<select>部分に読み込まれるプルダウンの色が、必ずbc[0]（サンプル0の色）になります。

例えば、サンプル2のoptionにselectedが記載されていた場合、画面の初期表示はbc[2]（サンプル2の色）にしたいのですが、この方法をご教授いただけませんでしょうか。

お忙しいところ申し訳ございません。
どうぞ宜しくお願いいたします。

回答No.1

steel_gray · ベストアンサー

スクリプト部分を次のように。

function chBackGround(e){
e.style.backgroundColor=
e.options[e.selectedIndex].style.backgroundColor;
}

window.onload = function() {
chBackGround(document.getElementById('key'));
}

お礼

早速のご回答ありがとうございます！！
思っていたとおりの動きになりました。
感謝感謝です。
ありがとうございましたm(__)m