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

Question

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

约束:

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

作为示例，假设从下面选择了“健康”。因此，在选择完成并单击页面中的空格后，“健康”应该显示为红色/黄色

我不懂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,output

谢谢，问候

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>