HTMLのoption要素にdisplay noneはスマホブラウザでは適用されない

結論

素直に disabled属性を使おう。

どういう事か？

セレクトボックスを作るselect要素に、選択肢を設定するために記述するのがoption要素です。

これを、フォームに入力された条件に応じて消したいというケースがたまにあります。

例えばECサイトで、Tシャツの種類を選択させるようなフォームがあったとします。

そのTシャツのサイズは「S」「M」「L」が用意されているけど、「赤色」だけ「L」しかない、というようなケースです。 （そもそも一般的にこういうものはECのシステム側で制御されていますが）

そういう時に、次のように「S」と「Ｍ」のoption要素にCSSでdisplay: none;を適用したとします。

<select >
 <option value="S" style="display: none;">S</option>
 <option value="M" style="display: none;">M</option>
 <option value="L">L</option>
</select>

すると、PCの主要なブラウザではその項目は消えるのですが、スマートフォンのブラウザでは消えずにそのまま表示されます。

iOSのSafariでこのような挙動が起きるというのを見かけたのですが、私の環境では、iOSのChromeでもdisplay: none;が適用されずに表示されていました。

ちなみに、デスクトップブラウザのスマホのエミュレータではdisplay: none;を適用した要素は消えるので、実機で確認しないとこの挙動は見逃します。

PCでも注意が必要！

この記事を書きながら検証していた時に気づいたのですが、例えば上記のように、一番初めのoption要素にdisplay: none;が適用されていた場合、ページ読み込み時は、その選択肢は表示されていて、セレクトボックスを選択すると、消えるようです。

つまり、セレクトボックスを触った後に、display: none;が適用されるようです。

こちらの動画を参考にしてみてください。

どうすれば消えるのか？

PCでも、スマートフォンでも、option要素を他の要素で囲うとそのoption要素が消えるようです。

例えば、<span><option value="S">S</option></span>といったようにすると消えるようです。

ここで注意が必要なのが、あらかじめHTMLで記述しても、ブラウザ側がコードを直してくれるようで、この<span>はなかった事になります。

そのため、JavaScriptで追加する必要があるようです。

次の動画が参考になると思います。

どうするのが良いのか？

面倒な事をせずに、素直に option要素にdisabled属性を付与するのが一番良い気がします。

---