CSS を使用して選択メニューのオプションを非表示にし、DOM の存在を維持する方法

で を非表示にするCSS を使用したメニュー

探求心旺盛な人は、

を非表示にするという奇妙な難題に遭遇しました。 内の要素メニューは Chrome では難しいようですが、Firefox では難なく処理されます。この問題は、検索条件に基づいて特定の を非表示にする必要がある場合に発生します。

これらの非表示の が キーを押したときに再表示されないようにするには、 Chrome でメニューをクリックした場合、HTML5 で利用できる解決策は hidden 属性です。 に hidden を追加することで、要素を追加すると、DOM 内での存在は維持されたまま、ビューから非表示になります。この方法は、Internet Explorer 11 より前のバージョンではサポートされていません。

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

限られたシナリオでは、hidden 属性とdisabled 属性を組み合わせて設定すると、代替アプローチが提供されることがあります。これにより、意味的に間違った構造や要素の追加/削除の必要性が回避されます:

以上がCSS を使用して選択メニューのオプションを非表示にし、DOM の存在を維持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。