change text color on change of selection in dropdown list
I have a drop-down list of colors, and when selected, i want to change a value of css font color to the value of the selection.
How can i do this?
<select name="color">
<option value="white" selected="selected">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="light blue">light blue</option>
<option value="dark blue">dark blue</option>
<option value="light green">light green</option>
<option value="dark dreen">dark green</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="gray">gray</option>
</select>
The css i want to change (its the text in a textfield)
#create form .text {
height: 50px;
width: 500px;
font-size: 36px;
font-family: "Trebuchet MS", Arial, Hel开发者_StackOverflow中文版vetica, sans-serif;
font-weight: bold;
color:#fff;
}
This will work for colors except light/dark blue/green : to make them work, remove the spaces in the value
attributes of the corresponding option
tags (and fix the typo in dark dreen)
<script language="javascript">
function setColor()
{
var color = document.getElementById("color").value;
document.getElementById("txtID").style.color = color;
}
</script>
<select id="color" onclick="setColor();">...</select>
This is really easy using jQuery (or most of the library's)
$('#color').change(function(){
$('#create form .text').css('color', $(this).val());
});
I think the code is pretty self explaining
EDIT
Just noticed some of your values are not real colors, you could use a switch for these cases, or decide to give them a value with the css color name: http://www.w3schools.com/css/css_colornames.asp
精彩评论