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

2021年5月12日2022年7月25日

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);
}