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

Posted 2023-02-21

【中文标题】如何使用 CSS 在 <select> 菜单中隐藏 <option>？

【英文标题】：How to hide a <option> in a <select> menu with CSS?

【发布时间】：2012-03-03 08:07:21

【问题描述】：

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

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

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

【问题讨论】：

而不是在搜索中隐藏和显示。尝试根据搜索填充选择

我同意 Henesnarfel。如果您已经在进行搜索或某种查询，您应该能够只填充您想要的。

this 在 Chrome 16.0.912.77 m 中对我来说很好用。我误解了这个问题吗？

@mgibsonbr 它不能跨浏览器工作。

@Henesnarfel 隐藏选项可能有充分的理由。例如，我有一个带有选择列表框和链接的页面，用于隐藏或显示标记为非活动的项目。没有理由在用户更改该选项时保留多个列表或向服务器查询新列表。

【参考方案1】：

简单地说，这也可以通过 HTML 来实现。

<select>
    <option value="" disabled selected hidden>Please Choose</option>
    <option value="0">hii</option>
    <option value="1">hello</option>
</select>

【参考方案2】：

现代解决方案是简单地应用隐藏的 CSS，例如：

<option value="" style="display:none;">Select Item</option>

或与类

<option value="" class="hidden">Please select</option>

---

注意class case，添加css like

.hidden 
  display: none;

【参考方案3】：

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

<option hidden>Hidden option</option>

IE 。但是如果你只需要隐藏几个元素，也许只设置隐藏属性结合禁用比添加/删除元素或不进行语义正确的构造。

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

Reference.

【讨论】：

这是现代答案。理想情况下，我们还将其设置为disabled，这样那些不支持HTML5 global hidden attribute 的浏览器将为用户提供一些视觉指示。

你如何在 CSS 中使用这种技术？

不适用于 Safari、Edge 和 IE。 Bug for Safari 已有 10 年历史，请帮助更新现有补丁。在 Edge 问题跟踪器中找不到错误。

解决方法是使用<option hidden disabled>，因此它隐藏在所有好的浏览器中并在其他浏览器中禁用。

看起来hidden 的所有绿灯：caniuse.com/#feat=hidden

【参考方案4】：

游戏迟到了，但其中大部分似乎相当复杂。

我是这样做的：

var originalSelect = $('#select-2').html();

// filter select-2 on select-1 change
$('#select-1').change(function (e) 

    var selected = $(this).val();

    // reset select ready for filtering
    $('#select-2').html(originalCourseSelect);

    if (selected) 
        // filter
        $('#select-2 option').not('.t' + selected).remove();
    

);

select-1 的标记：

<select id='select-1'>
<option value=''>Please select</option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>

select-2 的标记：

<select id='select-2'>
<option class='t1'>One</option>
<option class='t2'>Two</option>
<option>Always visible</option>
</select>

【参考方案5】：

我建议您不要使用使用<span> 包装器的解决方案，因为它不是有效的HTML，这可能会导致问题。我认为首选的解决方案是实际删除您希望隐藏的任何选项，并根据需要恢复它们。使用 jQuery，你只需要这 3 个函数：

第一个函数将保存select的原始内容。为了安全起见，您可能希望在加载页面时调用此函数。

function setOriginalSelect ($select) 
    if ($select.data("originalHTML") == undefined) 
        $select.data("originalHTML", $select.html());
     // If it's already there, don't re-set it

下一个函数调用上述函数以确保原始内容已保存，然后简单地从 DOM 中删除选项。

function removeOptions ($select, $options) 
    setOriginalSelect($select);
    $options.remove();
 

只要您想“重置”回所有原始选项，都可以使用最后一个功能。

function restoreOptions ($select) 
    var ogHTML = $select.data("originalHTML");
    if (ogHTML != undefined) 
        $select.html(ogHTML);
    

请注意，所有这些函数都希望您传入 jQuery 元素。例如：

// in your search function...
var $s = $('select.someClass');
var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');
restoreOptions($s); // Make sure you're working with a full deck
removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed

这是一个工作示例：http://jsfiddle.net/9CYjy/23/

【讨论】：

可靠而不是黑客。很好的答案！

@DanBeaulieu 之前的jsfiddle中有一个函数命名错误。我修复并更新了上面的链接。感谢您了解这一点。

是的，这也是我的选择。我实际上设法将代码打得更小，首先将数据值放入变量中，如果未定义，它将保存选项，否则它将恢复选项。我的需求是特定的。

我必须添加 var value=$select.val(); $select.html(ogHTML); $select.val(value); 才能在恢复后保持选中的值。

选择要删除的选项并删除它们的循环只工作了一次。在那之后， options.remove() 对我没有影响。一旦我将 restoreOptions($s) 调用移动了几行，以便我始终使用一个完整的、新鲜的 Select 对象，它就起作用了。

【参考方案6】：

这个似乎在 chrome 中对我有用

$("#selectid span option").unwrap();
$("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');

【讨论】：

请在您的代码中添加代码格式，方法是缩进 4 个空格或使用 ` 包装您的代码。

这段代码很棒！它适用于最新的 chrome、firefox 和 IE 11，这对我来说已经足够了 :)

在我上次发表评论之前，这个东西也适用于 IE 7！所以 ff 3.5，这是我最后想出的，它在 IE 和 chrome 上以某种方式保留在选项隐藏之前已选择的值，如果在带回选项浏览器后未设置另一个值，则会设置选项像以前一样被选中！

【参考方案7】：

// Simplest way

var originalContent = $('select').html();

$('select').change(function() 
    $('select').html(originalContent); //Restore Original Content
    $('select option[myfilter=1]').remove(); // Filter my options
);

【参考方案8】：

您应该使用 JavaScript 从<select> 中删除它们。这是让它们消失的唯一有保证的方法。

【讨论】：

使用 jQuery，这可以通过 remove: $('options').remove();

完成

【参考方案9】：

您必须实现两种隐藏方法。 display: none 适用于 FF，但不适用于 Chrome 或 IE。所以第二种方法是用display: none 将<option> 包装在<span> 中。 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 建议的额外检查

【讨论】：

这种疯狂的方法是唯一真正完全跨浏览器工作并且不涉及创建虚假隐藏选择框黑客的方法。

小心这个。起初它似乎工作得很好，但在某个地方它停止了。这是一个小演示：jsfiddle.net/Yb6sk/9

虽然这个解决方案确实隐藏了元素，但任何读取<select> 值的尝试（使用jQuery 的.val()）都将返回null。我刚刚在 Chrome 29 中对此进行了测试，所以 Google 人要小心！

有趣的 hack，但我建议尽可能避免使用“技术上无效的 HTML”。

没错，所有浏览器都有不同的实现。但是浏览器不能严格执行标准规范的原因之一是有太多不符合规范的实时代码。 IMO：如果没有其他解决方案，那么请务必使用 hack。但是，如果您可以按照规范并解决您的问题，为什么不呢？它可以帮助您的代码与他人相处融洽，并有助于加强规范。

【参考方案10】：

！！！警告！！！

将第二个“IF”替换为“WHILE”否则不起作用！

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

【参考方案11】：

toggleOption 功能并不完美，并在我的应用程序中引入了令人讨厌的错误。 jQuery 会与 .val() 和 .arraySerialize() 混淆 尝试选择选项 4 和 5 以了解我的意思：

<select id="t">
<option value="v1">options 1</option>
<option value="v2">options 2</option>
<option value="v3" id="o3">options 3</option>
<option value="v4">options 4</option>
<option value="v5">options 5</option>
</select>
<script>
jQuery.fn.toggleOption = function( show ) 
    jQuery( this ).toggle( show );
    if( show ) 
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
     else 
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    
;

$("#o3").toggleOption(false); 
$("#t").change(function(e) 
    if($(this).val() != this.value) 
    console.log("Error values not equal", this.value, $(this).val());
    
);
</script>

【参考方案12】：

Ryan P 的答案应该改为：

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

否则会被太多标签包裹

【讨论】：

请注意，根据 HTML 规范 (w3.org/TR/html5/forms.html#the-select-element)，<select> 应仅包含 <option> 或 <optgroup> 或脚本支持元素。所以你应该避免使用无效的<span> 包装器。

【参考方案13】：

以这种方式选择输入很棘手。不如禁用它，这将跨浏览器工作：

$('select').children(':nth-child(even)').prop('disabled', true);

这将禁用所有其他 <option> 元素，但您可以选择您想要的任何一个。

这是一个演示：http://jsfiddle.net/jYWrH/

注意：如果要删除元素的禁用属性，可以使用.removeProp('disabled')。

更新

您可以将要隐藏的<option> 元素保存在隐藏的选择元素中：

$('#visible').on('change', function () 
    $(this).children().eq(this.selectedIndex).appendTo('#hidden');
);

然后您可以将<option> 元素添加回原始选择元素：

$('#hidden').children().appendTo('#visible');

在这两个示例中，预期可见选择元素的 id 为 visible，隐藏选择元素的 id 为 hidden。

这是一个演示：http://jsfiddle.net/jYWrH/1/

请注意 .on() 是 jQuery 1.7 中的新内容，此答案的用法与 .bind() 相同：http://api.jquery.com/on

【参考方案14】：

简单的答案：你不能。表单元素的样式功能非常有限。

最好的选择是在选项上设置disabled=true（可能是灰色，因为只有 IE 会自动执行此操作），这会使选项无法点击。

或者，如果可以的话，完全删除 option 元素。

【参考方案15】：

由于您已经在使用 JS，您可以在页面上创建一个隐藏的 SELECT 元素，并且对于您试图隐藏在该列表中的每个项目，将其移动到隐藏列表中。这样，它们可以很容易地恢复。

我不知道在纯 CSS 中临时做这件事的方法...我原以为 display:none 技巧会奏效。