失敗例
まず、セレクトボックス内の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('<span class="selector-hide"></span>');<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;
}
