如何隐藏< option>在< select>菜单用CSS？ [英] How to hide a <option> in a <select> menu with CSS?

问题描述

我意识到Chrome似乎不允许隐藏< select>

I've realized that Chrome, it seems, will not allow me to hide <option> in a <select>. Firefox will.

我需要隐藏符合搜索条件的< option> 在Chrome网络工具中，我可以看到它们正确地被我的JavaScript设置为 display：none; ，但是之后< select& / code>菜单。

I need to hide the <option>s that match a search criteria. In the Chrome web tools I can see that they are correctly being set to display: none; by my JavaScript, but once then <select> menu is clicked they are shown.

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

How can I make these <option>s that match my search criteria NOT show when the menu is clicked? Thanks!

推荐答案

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

You have to implement two methods for hiding. display: none works for FF, but not Chrome or IE. So the second method is wrapping the <option> in a <span> with display: none. FF won't do it (technically invalid HTML, per the spec) but Chrome and IE will and it will hide the option.

编辑：哦，我已经实现this in jQuery：

Oh yeah, I already implemented this in 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：使用此功能的方法如下：

EDIT 2: Here's how you would use this function:

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

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

EDIT 3: Added extra check suggested by @user1521986

这篇关于如何隐藏< option>在< select>菜单用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！