Set background color on select HTML tag based on the background of an OPTION tag
Question
I have a simple select block which has three options: high, medium, low.
Each option has a background color that matches it value (red, yellow, green)
I would like to set background on the SELECT tag based on the color of the OPTION tag.
I am trying the following code however no matter how I try I get "rgb(0, 120, 215)" which I have no clue where comes from
var optionStyles = window.getComputedStyle(selectObj.options[selectObj.selectedIndex]); selectObj.style.background = optionStyles.getPropertyValue('background-color');
<select class="severity"> <option class="high" value="high">high</option> <option class="medium" value="medium">medium</option> <option class="low" value="low">low</option> </select>
I need help setting background color on the SELECT tag based on the value of the OPTION tag
Does anyone how this can be achieved?
1 answers
solution1
4 ACCPTED 2020-10-07 04:57:07
<html> <head> <style> .high { background-color: red; } .medium { background-color: green; } .low { background-color: blue; } .other { background-color: white; } </style> </head> <body> <select id="demo" onchange="myFunction()"> <option class="other">--Select--</option> <option class="high" value="high">high</option> <option class="medium" value="medium">medium</option> <option class="low" value="low">low</option> </select> <script> function myFunction() { var selectedvalue = document.getElementById("demo").value; document.getElementById("demo").classList.remove(); document.getElementById("demo").classList.add(selectedvalue); } </script> </body> </html>
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.