失敗例

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です