Jump to content

Onchange Eventhandler Dropdownmenu


Yammaski
 Share

Recommended Posts

Hi,I want the backgroundcolor of a div to change into the color the customer choose in the dropdownmenu.Here my code so far.I've got it nearly work, but I'am surching for a solution to get the option value as "color-name" instead of the "hexadecimal code".I found a list with all the color-names/hex-codes, but isn't it possible to give the "option value" a name I choose ?See attach :ColorChoiceBG.JPG

<html><head><title>ColorChange</title><script language="javascript" type="text/javascript">  function changeBG(color){var element = document.getElementById('BG_Color_prShots').style;{element.background = color;} }</script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><table width="440" border="0" align="center" cellpadding="0">  <tr align="center">	<td><div style= width:"1px" id="BG_Color_prShots"><img src="baby 15.png"></div></td>  </tr>  <tr align="center">	<td><form>						  <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">							<tr>							  <td width="50%" align="center">								 <select name="FrogStyling_1_Color_Add" onChange="changeBG(this.value)">								  <option value="Black" style="background-color:#000000; color:#FFFFFF ">Black</option>								  <option value="White" selected="selected" style="background-color:#FFFFFF; color:#000000 ">White</option>								  <option value="#FFB400"  style="background-color:#FFB400; color:#000000 ">Golden Yellow</option>								  <option value="#FFD200"  style="background-color:#FFD200; color:#000000 ">Sun Yellow</option>								  <option value="#FFE600" style="background-color:#FFE600; color:#000000 ">Light Yellow</option>									<option value="Dark Red" style="background-color:#D70000; color:#FFFFFF ">Dark Red</option>									<option value="Light Red" style="background-color:#FA0000; color:#FFFFFF ">Light Red</option>									<option value="Orange" style="background-color:#FF8200; color:#FFFFFF ">Orange</option>									<option value="Bordeaux" style="background-color:#960028; color:#FFFFFF ">Bordeaux</option>									<option value="Light Violet" style="background-color:#9900BE; color:#FFFFFF ">Light Violet</option>									<option value="Telemagenta" style="background-color:#FF69A3; color:#FFFFFF ">Telemagenta</option>									<option value="Steel Blue" style="background-color:#003F79; color:#FFFFFF ">Steel Blue</option>									<option value="Striking Blue" style="background-color:#2A00D5; color:#FFFFFF ">Striking Blue</option>									<option value="Traffic Blue" style="background-color:#0076FF; color:#FFFFFF ">Traffic Blue</option>									<option value="Turquoise" style="background-color:#00CDAD; color:#FFFFFF ">Turquoise</option>									<option value="Dark Green" style="background-color:#005E00; color:#FFFFFF ">Dark Green</option>									<option value="Grass Green" style="background-color:#00A048; color:#FFFFFF ">Grass Green</option>									<option value="Yellow Green" style="background-color:#6ED72F; color:#FFFFFF ">Yellow Green</option>									<option value="Brown" style="background-color:#7C3500; color:#FFFFFF ">Brown</option>									<option value="Anthracite" style="background-color:#444243; color:#FFFFFF ">Anthracite</option>									<option value="Dark Grey" style="background-color:#505050; color:#FFFFFF ">Dark Grey</option>									<option value="Telegrey" style="background-color:#BEBEBE; color:#000000 ">Telegrey</option>									<option value="Light Grey" style="background-color:#E6E6E6; color:#000000 ">Light Grey</option>									<option value="Silver Grey" style="background-color:#C0C0C0; color:#FFFFFF ">Silver Grey</option>									<option value="Gold" style="background-color:#927530; color:#FFFFFF ">Gold</option>								</select>							  </td>							</tr>						  </table><br />						  <br />						</form></td>  </tr></table>   </body></html>

Link to comment
Share on other sites

1. Be aware that by rule, browers are required to recognize on 16 color names: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, and yellow. Other names might work in some browsers, but I do not think all current browsers support all X11 color names.2. An array that matches names to hex values would work. But I cannot think of a good reason NOT to use hex values in the value attribute of your options. I have also designed color pickers, and that is the way I do it.

Link to comment
Share on other sites

But I cannot think of a good reason NOT to use hex values in the value attribute of your options. I have also designed color pickers, and that is the way I do it.
The "option value" is triggered to show the colorname on an orderform after the color has been chosen."#FFB600" means nothing to the customer :)
Link to comment
Share on other sites

option.text contains the text content of your option. Since that is what the user sees when selecting the option, that's probably all you need for your order form.On the other hand, maybe I'm not sure what the original question was. Of course you can assign any value you want to a value property. If that is all you need for your project, then there should not be a problem.But if you need both values, then you can use one in the text and a different one in the value property. This would allow you, for example, to display a color swatch based on the value property, while using the text description on your order form.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...