如何使用纯 javascript 永久更改所选选项的 font/background 颜色
how to change font/background colors of a selected option permanently with pure javascript
我要求所选选项的font/background颜色在用户完成选择后永久更改,例如red/yellow。
约束条件:
- 代码必须在 IE11 中运行。
- 没有jquery。纯js.
- 表单有id。选择,选项没有id。
- 表格有几十个选择。
- 解决方案不必是内联js。
- 如果必须解决,我可以添加class来选择and/or选项。
例如,假设从下面选择了 "health"。所以 "health" 应该在选择完成后看到 red/yellow 并点击页面 space
我不懂js。我尝试如下,但在 ie11 中不起作用。浏览器 js 已启用。我找不到适合我的现有 Q/A。
<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 link: https://jsbin.com/hubigarofa/1/edit?html,output
谢谢,问候
创建一个单独的函数并在调用时使用此函数将元素传递给该函数
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>
我要求所选选项的font/background颜色在用户完成选择后永久更改,例如red/yellow。
约束条件:
- 代码必须在 IE11 中运行。
- 没有jquery。纯js.
- 表单有id。选择,选项没有id。
- 表格有几十个选择。
- 解决方案不必是内联js。
- 如果必须解决,我可以添加class来选择and/or选项。
例如,假设从下面选择了 "health"。所以 "health" 应该在选择完成后看到 red/yellow 并点击页面 space
我不懂js。我尝试如下,但在 ie11 中不起作用。浏览器 js 已启用。我找不到适合我的现有 Q/A。
<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 link: https://jsbin.com/hubigarofa/1/edit?html,output
谢谢,问候
创建一个单独的函数并在调用时使用此函数将元素传递给该函数
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>