テキストの代わりに画像を含む選択ボックスで作業しています(背景にcssを使用)。
<script type="text/javascript">
function onChange(element) {
element.style.backgroundColor = "Yellow";
element.className = "on_change";
}
</script>
<select onchange="onChange(this);">
<option value="1" style="background: url(/one.png) no-repeat scroll 0 0 transparent; width:32px; height:32px;"></option>
<option value="2" style="background: url(/two.png) no-repeat scroll 0 0 transparent; width:32px; height:32px;"></option>
<option value="3" style="background: url(/three.png) no-repeat scroll 0 0 transparent; width:32px; height:32px;"></option>
</select>
問題は、選択したオプションの値を取得する方法です。1の場合は1つの画像を設定し、2の場合は純粋なjavascript(jQueryなし)を使用して別の画像を背景として設定しますか?
selectedIndex
それが私の問題の鍵であることは知っていますが、それをどのように使用するか、またはif else
ステートメントでどのように使用するかについてはわかりません。
上記のスクリプトは私の試行の1つにすぎません。実際には、上記のスクリプトを使用して同じタスクを実行しています。
<select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor; this.style.color=this.options[this.selectedIndex].style.color">