如何在带有CSS的<select>菜单中隐藏<选项>？

Question

如何在带有CSS的<select>菜单中隐藏<选项>？我意识到Chrome似乎不允许我隐藏<option>在.<select>..火狐会的。我要藏起来<option>与搜索标准相匹配的。在Chrome Web工具中，我可以看到它们被正确地设置为display: none;我的JavaScript，但是有一次<select>单击菜单，就会显示它们。我怎么做这些<option>与我的搜索标准相匹配的是，单击菜单时不显示吗？谢谢!

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 optionjQuery(selector).toggleOption(false); // hide option

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

Answer 2

对于HTML 5，可以使用“隐藏”属性。

<option hidden>Hidden option</option>

它是不但如果您只需要隐藏几个元素，那么与添加/删除元素或不进行语义正确的构造相比，最好将隐藏属性与禁用的属性组合起来。

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

参照系.