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

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>

Answer 2

经过大量阅读、搜索和吸收本论坛和其他人的帮助，我想出了一些可行的方法：

function setcolour(pos) {
	pos.className = pos[pos.selectedIndex].className;
	pos.blur();
}

function sel_opt(option) {
	var tickselect = document.getElementById('TB_038_116');
	var tickvalue = tickselect.options[tickselect.selectedIndex].value;
	if (tickvalue == 0) {
	tickselect.value = option;
	setcolour(tickselect);
	}
}

select, option {
	color: black; 
}

select.redtick {
	color: red; 
}

select.blacktick { 
	color: black; 
}

option.redtick {
	color: red; 
	display: none;
}

option.blacktick { 
	color: black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h1><center>Styling Disabled Selected Options</center></h1>
<select id='TB_038_116' class='tickbox' onchange="setcolour(this)">
<option class='blacktick' style='display: none;' value='0' disabled selected>Option 0</option>
<option class='blacktick' value='1'>Option 1</option>
<option class='blacktick' value='2'>Option 2</option>
<option class='blacktick' value='3'>Option 3</option>
<option class='redtick' value='4' disabled>Option 4</option>
<option class='redtick' value='5' disabled>Option 5</option>
</select>
<button type='button' onclick='sel_opt(4)'>Select Option 4</button>
<button type='button' onclick='sel_opt(5)'>Select Option 5</button>

关键问题似乎是：

1. 选择的选项以两种方式显示：(a) 单击选择时在选项下拉列表中显示，(b) 选择后在选择本身中显示。
2. 选项的样式决定了选项在方法 (a) 中显示时的样式。它不影响选项在方法（b）中显示时的样式，这完全由选择的样式决定。
3. 在方法 (b) 中显示时，CSS 中无法设置单个选项的样式。因此，每次更改所选选项时，都需要以编程方式更改选择的样式。
4. 我的示例中的 jQuery 函数在用户手动更改选项时执行此操作，使用 onchange 事件，将样式从选定选项复制到选择。
5. onchange 事件不会由编程更改触发，因此进行更改的 Javascript 必须显式调用该函数。

我们最终到达了那里！感谢所有帮助我理解这一点并找到解决方案的人。

罗文