如何使用CSS在<选择>菜单中隐藏<选项>？

javascript dom jquery css

2022-08-30 04:48:40

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

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

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

答案 1

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

<option hidden>Hidden option</option>

IE < 11 不支持此功能。但是，如果您只需要隐藏几个元素，那么与添加/删除元素或进行语义不正确的构造相比，最好只是将隐藏属性与禁用结合使用。

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

参考。

答案 2

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

编辑：哦，是的，我已经在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建议的额外检查