0

テーブルの 1 つのセルの背景色を変更するドロップダウン メニューを作成する方法を教えてください。以下のコードは機能しますが、事前定義されたオプションのリストに対してのみです。以下にリストされている既存のコード：

<form name="bgcolorForm">Try it now: 
<select onChange="if(this.selectedIndex!=0)
document.getElementById('mycell').bgColor=this.options[this.selectedIndex].value">
<option value="choose">set background color    
<option value="FFFFCC">light yellow
<option value="CCFFFF">light blue
<option value="CCFFCC">light green
<option value="CCCCCC">gray
<option value="FFFFFF">white
 </select></form>
 <table>
     <tr>
         <td id = "mycell">Cell One</td>
         <td>Cell Two</td>
     </tr>
 </table>

既存のリストに含まれる値のリスト (HTML の色名) を参照するように、このコードを変更したいと考えています。たとえば、オプション値をリストする代わりに、次のようにします。

<select name="bg_color" id="bg_color" onchange=...>

コードの「onchange」部分の記述に問題があります。これを行うには変数を作成する必要があると思います...ドロップダウンリストに「赤、青、緑など」のような色の名前が含まれているため、.text 部分に到達する必要があると思います。以下は、私がこれを達成しようとしていた方法です。 

<script type="text/javascript">
var e = document.getElementById("bg_color");
var newcolor = e.options[e.selectedIndex].text; 
</script>

私は正しい軌道に乗っていますか？これを達成する方法を教えてください。

また、これを適用したい場合は、どのような追加の変更を加える必要がありますか?

4

2 に答える 2

0

色に # を入れるのを忘れた => #FFFFCC

それを試してください：

<option value="#FFFFCC">light yellow
<option value="#CCFFFF">light blue
<option value="#CCFFCC">light green
<option value="#CCCCCC">gray
<option value="#FFFFFF">white
于 2012-08-29T04:23:51.433 に答える
0

jquery を使用してコードを簡素化できます。また、他の多くのクロス ブラウザー JavaScript の問題を回避できます。こちらのフォームを使用してサンプルをまとめました。

http://jsfiddle.net/M8U7D/

于 2012-08-29T04:29:06.953 に答える