admin管理员组文章数量:1321805
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!");
}
};
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!");
}
};
Share
Improve this question
edited Mar 20, 2020 at 17:09
Brian Tompsett - 汤莱恩
5,89372 gold badges61 silver badges133 bronze badges
asked Nov 18, 2018 at 0:10
GorblesGorbles
11 gold badge1 silver badge3 bronze badges
0
4 Answers
Reset to default 2It 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./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>
本文标签: javascriptChange the color of an option when selectedStack Overflow
版权声明:本文标题:javascript - Change the color of an option when selected - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742107370a2421084.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论