如何使用 CSS 在 <select> 菜单中隐藏 <option>？

Question

我已经意识到 Chrome 似乎不允许我在 <option> 中隐藏 <select> > 。火狐会。

我需要隐藏与搜索条件匹配的 <option> 。在 Chrome 网络工具中，我可以看到它们被正确设置为 display: none; 通过我的 JavaScript，但是一旦单击 <select> 菜单，它们就会显示出来。

如何使这些与我的搜索条件匹配的 <option> 在单击菜单时不显示？谢谢！

原文由 Jesse Atkinson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须实现两种隐藏方法。 display: none 适用于 FF，但不适用于 Chrome 或 IE。所以第二种方法是将 <option> 包装在 <span> 中，并带有 display: none 。 FF 不会这样做（技术上无效的 HTML，根据规范），但 Chrome 和 IE 会，它会隐藏该选项。

编辑：哦，是的，我已经在 jQuery 中实现了这个：

 jQuery.fn.toggleOption = function( show ) {
 jQuery( this ).toggle( show );
 if( show ) {
 if( jQuery( this ).parent( 'span.toggleOption' ).length )
 jQuery( this ).unwrap( );
 } else {
 if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
 jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
 }
 };

编辑 2：这是您将如何使用此功能：

 jQuery(selector).toggleOption(true); // show option
 jQuery(selector).toggleOption(false); // hide option

编辑 3：添加了@user1521986 建议的额外检查

原文由 kitti 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于 HTML5，您可以使用“隐藏”属性。

 <option hidden>Hidden option</option>

IE < 11 不 支持它。但是如果您只需要隐藏一些元素，与添加/删除元素或不进行语义正确的构造相比，将隐藏属性与禁用组合设置可能会更好。

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

参考。

原文由 Lukas Jelinek 发布，翻译遵循 CC BY-SA 3.0 许可协议