I require the selected option's font/background colors change permanently to for example red/yellow after user completed the selection.
Constraints:
As an example assume "health" was selected from below. So "health" should be seen red/yellow after selection completed and clicked to a space in the page
I don't know js. I tried as below and did not work in ie11. Browser js is enabled. I couldn't find an existing Q/A proper for me.
<form id="myform" name="myform" method="post" accept-charset="utf-8">
<select name="select1" onchange="this.options[this.selectedIndex].style.color='red'">
<option value="0">Select</option>
<option style="color:#333;" value="1">Health</option>
<option value="2">Wisdom</option>
</form>
here is the jsbin link: https://jsbin.com/hubigarofa/1/edit?html,output
thanks, regards
Make a seperate function and on call pass the element to that function using this
function a(elem)
{
document.querySelector('select').style.backgroundColor = ""
document.querySelector('select').style.color = ""
elem.options[elem.selectedIndex].style.color='red'
if(elem.value=="1")
{
document.querySelector('select').style.backgroundColor = "yellow"
document.querySelector('select').style.color = "red"
}
}
<form id="myform" name="myform" method="post" accept-charset="utf-8">
<select name="select1" onchange="a(this)">
<option value="0">Select</option>
<option style="color:yellow;" value="1">Health</option>
<option value="2">Wisdom</option>
</form>