如何使用纯javascript永久更改所选选项的字体/背景颜色

Question

我要求所选选项的字体/背景颜色在用户完成选择后永久更改为红色/黄色。

限制：

• 代码必须在IE11中工作
• 没有jquery。纯js
• 表单有id。选择，选项没有id
• Form有数十个选项
• 解决方案不必是内联js
• 如果这是解决方案的必选项，我可以添加类来选择和/或选项

例如，假设从下面选择了"health"。因此，在完成选择并点击页面中的一个空格后，"健康"应该显示为红色/黄色

我不认识js。我尝试了以下操作，但没有在ie11中工作。浏览器js已启用。我找不到适合我的现有问答。

<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>

• 为什么我的审判没有成功
• 如何使它在满足我的约束条件的同时发挥作用

这里是jsbin链接：https://jsbin.com/hubigarofa/1/edit?html，输出

谢谢，

Answer 1

制作一个单独的函数，并在调用时使用此将元素传递给该函数

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>