如何在选择中禁用并选择选项的样式？

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() { 
 
\t \t var tickselect = document.getElementById('TB_038_116'); 
 
\t \t var tickvalue = tickselect.options[tickselect.selectedIndex].value; 
 
\t \t if (tickvalue == 0) { 
 
\t \t \t tickselect.value = 4; 
 
\t \t \t tickselect.className='redText'; 
 
\t \t } 
 
\t \t }

.tickbox{ color:black; } 
 
.redText{ color:red; } 
 
option:disabled { 
 
    color: red; 
 
}

<div class="container body-content"> 
 
\t \t \t \t <h1> 
 
\t \t <center>Styling Disabled Selected Options</center> 
 
\t \t </h1> 
 
\t \t <select id='TB_038_116' class='tickbox' > 
 
\t \t <option value='0' disabled="disabled" selected>Option 0</option> 
 
\t \t <option value='1' class='tickbox'>Option 1</option> 
 
\t \t <option value='2' class='tickbox'>Option 2</option> 
 
\t \t <option value='3' class='tickbox'>Option 3</option> 
 
\t \t <option value='4' style='color: red;' class='redText' disabled>Option 4</option> 
 
\t \t <option value='5' style='color: red;' class='redText' disabled>Option 5</option> 
 
\t \t </select> 
 
\t \t <button type='button' onclick='do_it()'>Click Me</button> 
 
\t </div>

Answer 2

做工精细大量的阅读后，搜索和吸收帮助这个论坛和其他人，我已经提出了一些作品：

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

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

select, option { 
 
\t color: black; 
 
} 
 

 
select.redtick { 
 
\t color: red; 
 
} 
 

 
select.blacktick { 
 
\t color: black; 
 
} 
 

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

 
option.blacktick { 
 
\t 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. 选项会显示在两个方面，（一）在选项的下拉列表中，当您单击选择，和（b）一旦选择，在选择本身。
2. 选项的样式决定了方法（a）中显示的选项的样式。它确实而不是影响了方法（b）中显示的选项的风格，这完全取决于选择的风格。
3. 在方法（b）中显示时，CSS没有办法设置单个选项的样式。因此，每次更改所选选项时，都必须以编程方式更改选择的样式。
4. 我的示例中的jQuery函数在用户手动更改选项时使用onchange事件将样式从所选选项复制到select时执行此操作。
5. onchange事件是而不是由程序化更改触发，因此进行更改的Javascript必须明确调用该函数。

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

罗文