javascript - 如何在禁用和选中的选择中设置选项样式？

Question

我希望某些选项以红色显示，并且用户无法在表单上选择。这些选项可以通过 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 不同，所以我必须在每次更改所选选项时动态更改样式。

我可以为选中和禁用的选项设置样式吗？

Answer 1

当您单击该按钮时，它会选择选项 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>