Question

我希望某些选项以红色显示，并且不能由用户在表单上选择。可以通过JS选择这些选项。我希望这些禁用选项在下拉列表中显示为红色（实际上，如果它们在下拉列表中根本不可见则会更好），如果选中，则在用户具有该字段时没有点击它。我当前的解决方案在下拉列表中显示红色选项，但如果选中，则不会在字段中显示为红色。

以下是代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

单击按钮后，我需要选项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>

关键问题似乎是：

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

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

罗文

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

2 个答案: