I want an option to change color when selected by a user. For Example: a user selects the red option then a function would run that would change the color red. If the user then selected green then it would change green. etc.
<select onchange="changeColor();" class="color" id="rgb">
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
</select>
I started with the function below but I'm not sure where I went wrong.
function changeColor() {
var red = document.getElementById('red');
var green = document.getElementById('green');
var blue = document.getElementById('blue');
if(event.target.value == red) {
red.style.color = "red";
} else if(event.target.value == green) {
green.style.color = "green";
} else if(event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}
};
It looks like you haven't added an 'event' parameter to your function. Try this:
function changeColor(event) {
var red = document.getElementById(red);
var green = document.getElementById(green);
var blue = document.getElementById(blue);
if (event.target.value == red) {
red.style.color = "red";
} else if (event.target.value == green) {
green.style.color = "green";
} else if (event.target.value == blue) {
blue.style.color = "blue";
} else {
alert("There was an error!");
}};
Try this. When you select an option you will recieve the <select>
element in colorParam
. If you select the first option, you will get Red
in colorParam.value
, but you are using IDs in lowerCase, so you can use toLowerCase()
function to convert it. Then select the option
element and apply styles.
function changeColor(colorParam) { let color = colorParam.value.toLowerCase(); var optionElement = document.getElementById(color); optionElement.style.color = color; };
<select onchange="changeColor(this);" class="color" id="rgb"> <option id="red" value="Red">Red</option> <option id="green" value="Green">Green</option> <option id="blue" value="Blue">Blue</option> <option id="white" value="White">White</option> <option id="pink" value="Pink">Pink</option> </select>
I'm not sure you can style an <option>
element. You can style the <select>
element though. However, color
doesn't seem to be a property you can change, background-color
is.
If that's all you need you could as well inline the javascript code in the onchange
handler attribute. You would need to set the values of the <option>
elements to valid css colours.
<select onchange="this.style.backgroundColor=this.value"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select>
Please check onchange only selected value color will get changed.
$(function() { //The color of the selected value changed jQuery("#state-list").on("change", function() { if (jQuery(this).val()) { let colorselect= jQuery(this).find("option:selected").attr('id'); jQuery('.statetext option').css("color", "#919ca1"); jQuery('.statetext').find("option:selected").css("color", colorselect); jQuery('.statetext').css("color", colorselect) } else { jQuery('.statetext').css("color", "#919ca1"); jQuery('.statetext option').css("color", "#919ca1"); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="state-list" name="State" data-name="State" class="statetext" style="color: rgb(145, 156, 161);"> <option value="">State</option> <option value="CA" id="red">CA</option> <option value="BC" id="yellow">BC</option> <option value="DE" id="green">DE</option></select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.