selectでオプションを無効にして選択すると、そのスタイルをどのようにスタイルするのですか？

Question

いくつかのオプションを赤色で表示し、フォーム上でユーザーが選択できないようにします。これらのオプションは、JSを介して選択することができます。これらの無効なオプションを両方のドロップダウンリストに赤色で表示したい（実際にはドロップダウンリストに表示されていない方が良いでしょう）。また、選択されていれば、ユーザーがクリックしていないときその上に。現在のソリューションでは、ドロップダウンリストに赤色のオプションが表示されますが、選択されている場合はフィールドに赤色で表示されません。私はボタンをクリックした後、赤で表示されるようにオプション4を必要とする

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>

：

は、ここでは、コードです。

オプションをクリックすると、ドロップダウンリストとコントロールで別々にスタイルを設定できますか？オプション1と2と3よりもオプション4と5のスタイルが異なる必要があるため、これは面倒な解決策になるので、選択したオプションが変更されるたびにスタイルを動的に変更する必要があります。

選択して無効にしたオプションのスタイルを設定できますか？

Answer 1

ボタンをクリックしたとき、それはからの助けを検索し、吸収し、それがずっと読んだ後、表示階調と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

でその作業罰金だ理由は、オプション4を選択していますこのフォーラムと他の人たちは、私は何かを思いつきました：

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. オプションは、あなたが選択をクリックすると、オプションのドロップダウンリストで（a）は、二つの方法で表示され、（b）にされています一度選択すると、選択自体に含まれます。
2. オプションのスタイリングは、方法（a）で表示されたときのオプションのスタイルを決定します。 ではなく、は、（b）の方法で表示されたときにオプションのスタイルに影響します。これは、選択のスタイルによって完全に決まります。
3. （b）の方法で表示される個々のオプションのスタイルを設定する方法はありません。したがって、選択したオプションが変更されるたびに、プログラムによって選択のスタイルを変更する必要があります。
4. 私の例のjQuery関数は、ユーザーが手動でオプションを変更し、onchangeイベントを使用して、選択したオプションからスタイルにスタイルをコピーするときにこれを行います。
5. onchangeイベントはではなく、がプログラムによる変更によって起動されるため、変更を行うJavascriptは関数を明示的に呼び出す必要があります。

私たちは最後にそこに着いた！私がこれを理解して解決策を見出すのを助けてくれた皆様に感謝します。

ローワン