失敗例
まず、セレクトボックス内のoption要素が一時的に不要になったため、CSSで非表示にしたいと思い、このようにしてみました。
<select id="selector"> <option value="1">1番目</option> <option value="2">2番目</option> <option value="3">3番目</option> </select>
#selector option:nth-child(2) { display: none; }
ChromeやFirefoxでは、これで問題なく非表示にできましたが、Safari(PC / iPad /iPhone全て)では効果がありません。ちなみに、hide()でもval()でも効果がありませんでした。
あまり大掛かりにはしたくはないし、非表示にしなくても良くなったらすぐに元に戻したい。
ならばCSSが効く状態にしてしまえば良いということで、spanでクラスを与えることにしました。
解決法
jQueryで指定の要素にspan要素を付与し、それに display: none; を当てる。
これで全てのブラウザに適用することが出来ました。
$('#selector option[value="2"]').wrap('');
<select id="selector"> <option value="1">1番目</option> <span class="selector-hide"><option value="2">2番目</option></span> <option value="3">3番目</option> </select>
.selector-hide { display: none; }