使用javascript下拉菜单更改表格单元格的颜色

Question

I'd like some help in creating a dropdown menu that changes the background color of one cell of a table. The code that I have below works, but only for a list of pre-defined options. The existing code listed below:

<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>

I would like to modify this code such that it references a list of values (HTML color names) contained in an existing list. For instnace, instead of listing the option values, I have:

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

I am having trouble with writing the "onchange" portion of the code. I think that I need to create a variable in order to do this... I think I need to get to .text portion because my dropdown list contains color names like "red, blue, green, etc." Below is how I was trying to accomplish this.

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

Am I on the right track? Please let me know how you would accomplish this.

Also, I'm curious on if I wanted to apply this to a within the what additional changes would I have to make?

Answer 1

You forgot to put # for colors => #FFFFCC

Try with that:

<option value="#FFFFCC">light yellow
<option value="#CCFFFF">light blue
<option value="#CCFFCC">light green
<option value="#CCCCCC">gray
<option value="#FFFFFF">white

Answer 2

You can simplify your code by using jquery, it will also avoid you a lot of other cross browser javascript headaches. I have put together a sample using your form here.

http://jsfiddle.net/M8U7D/