我希望某些选项以红色显示,并且用户无法在表单上选择。这些选项可以通过 JS 选择。我希望这些禁用的选项在下拉列表中显示为红色(实际上,如果它们在下拉列表中根本不可见会更好),并且如果被选中,则在用户未单击的字段中显示在上面。我当前的解决方案在下拉列表中以红色显示选项,但如果选中则不会在字段中显示为红色。
代码如下:
function do_it() {
var tickselect = document.getElementById('TB_038_116');
var tickvalue = tickselect.options[tickselect.selectedIndex].value;
if (tickvalue == 0) {
tickselect.value = 4;
}
}
<h1>
<center>Styling Disabled Selected Options</center>
</h1>
<select id='TB_038_116' class='tickbox'>
<option value='0' disabled selected>Option 0</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option3</option>
<option value='4' style='color: red;' disabled>Option 4</option>
<option value='5' style='color: red;' disabled>Option 5</option>
</select>
<button type='button' onclick='do_it()'>Click Me</button>
我需要选项 4 在单击按钮后显示为红色。
我可以在下拉列表中和未单击时在控件中分别设置选项样式吗?这将是一个麻烦的解决方案,因为选项 4 和 5 的样式需要与选项 1、2 和 3 不同,所以我必须在每次更改所选选项时动态更改样式。
我可以为选中和禁用的选项设置样式吗?
最佳答案
当您单击该按钮时,它会选择选项 4,这就是为什么它显示为灰色并且在 firefox 中工作正常的原因
function do_it() {
var tickselect = document.getElementById('TB_038_116');
var tickvalue = tickselect.options[tickselect.selectedIndex].value;
if (tickvalue == 0) {
tickselect.value = 4;
tickselect.className='redText';
}
}
.tickbox{ color:black; }
.redText{ color:red; }
option:disabled {
color: red;
}
<div class="container body-content">
<h1>
<center>Styling Disabled Selected Options</center>
</h1>
<select id='TB_038_116' class='tickbox' >
<option value='0' disabled="disabled" selected>Option 0</option>
<option value='1' class='tickbox'>Option 1</option>
<option value='2' class='tickbox'>Option 2</option>
<option value='3' class='tickbox'>Option 3</option>
<option value='4' style='color: red;' class='redText' disabled>Option 4</option>
<option value='5' style='color: red;' class='redText' disabled>Option 5</option>
</select>
<button type='button' onclick='do_it()'>Click Me</button>
</div>
关于javascript - 如何在禁用和选中的选择中设置选项样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46992782/