如何在選擇中禁用並選擇選項的樣式？

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必須明確調用該函數。

我們到了那裏！感謝所有幫助我理解這一點並獲得解決方案的人。

羅文