HTML5 選択メニューのオプションを確実に非表示にするにはどうすればよいですか?

CSS を使用した HTML5 選択メニューのオプションの非表示

を非表示にする機能にもかかわらずdisplay: none を使用した Firefox の要素CSS、Chrome では、 をクリックすると非表示のオプションが表示されるという問題が発生します。メニュー。このため、メニューを開いたときに再表示されないようにしながら、検索条件に一致するオプションを効果的に非表示にする方法という問題が生じます。

解決策: hidden 属性を利用する

HTML5 準拠のブラウザの場合、hidden 属性は属性は効果的な解決策を提供します。この属性は、ビューと選択の両方からオプションを非表示にし、メニュー操作に関係なく、オプションが非表示のままになるようにします。

<option hidden>Hidden Option</option>

ログイン後にコピー

hidden 属性は、IE バージョン 11 未満ではサポートされていないことに注意することが重要です。ただし、少数のオプションを非表示にすることが主な関心事である場合、hidden 属性とdisabled 属性を組み合わせることで、要素の追加や削除、セマンティクスの違反などのより複雑な手法と比較して実用的な解決策が得られます。規約。

Option1 Option2 <option hidden>Hidden Option</option>