iOSでoptionタグをdisplay:noneにできない場合の対処法

selectタグの子要素optionを選んだ値によって非表示にしたいことってありますよね。

現象

例えば絞り込み検索などでは一つ目の検索項目で何を選ぶかで二つ目の検索項目の内容を変えたりします。
そのとき、二つ目の検索項目で不要なoptionを非表示にしたい。style属性のdisplay:noneでPCでは簡単にできるのですが、iOSではdisplay:noneで非表示にしたoptionがなぜか表示されてしまう現象があります。

解決策

HTML

<select name="fruits">
    <option value="レモン">レモン</option>
    <option value="バナナ">バナナ</option>
    <option value="りんご">りんご</option>
</select>

JS

JQueryの場合

var fruits = document.getElementsByName("fruits"),
    fruitsOption = fruits.document.getElementsByTagName("option");

for(let i = 0; i < fruitsOption.length; i++){
    $(fruitsOption[i]).wrap(<span style="display:none"></span>);
}

JSネイティブの場合

var fruits = document.getElementsByName("fruits"),
    fruitsOption = fruits.document.getElementsByTagName("option");

function wrap(element, wrapper) {
    element.parentNode.insertBefore(wrapper, element);
    wrapper.appendChild(element);
}

for(let i = 0; i < fruitsOption.length; i++){
    let newSpan = document.createElement('span');
    wrap(fruitsOption[i], newSpan);
}

まとめ

jsでoptionをspanで括って、それを非表示にすることでiOSでも無事に非表示にすることができました。
逆に上の例でspanを取りたい場合はunwrap()を使えば囲んでいるタグを消すことができます。