【jQuery】Safariでselect要素のoptionをCSSで非表示にするお手軽な方法

失敗例

まず、セレクトボックス内の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;
}