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

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

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

<option>单击菜单时，如何显示不符合搜索条件的这些？谢谢！

您必须实现两种隐藏方法。display: none适用于FF，但不适用于Chrome或IE。因此，第二种方法是将with 包装在<option>中。FF不会这样做（按照规范，技术上无效的HTML），但是Chrome和IE会并且会隐藏该选项。<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建议的额外检查

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

<option hidden>Hidden option</option>

它不是通过IE <11的支持，但如果你只需要隐藏一些元素，也许这将是最好只设置在与残疾人联合隐藏属性相比，添加/删除内容或做不正确的语义结构。

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

参考。

我会建议你做不使用使用该解决方案的<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/

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;" />');
        }
    };

否则它会被太多标签包裹

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>

选择输入方式很棘手。如果禁用它，可以跨浏览器使用：

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

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

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

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

更新资料

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

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

然后，您可以将<option>元素添加回原始的select元素：

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

在这两个示例中，期望可见的select元素的ID为visible，而隐藏的select元素的ID为hidden。

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

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

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

最好的选择是disabled=true在选项上设置（可能是灰色，因为只有IE才自动设置），这将使该选项不可单击。

或者，如果可以，请完全删除该option元素。

// Simplest way

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

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

由于您已经在使用JS，因此可以在页面上创建一个隐藏的SELECT元素，对于要隐藏在该列表中的每个项目，请将其移到该隐藏列表中。这样，可以轻松地还原它们。

我不知道用纯CSS做到这一点的简易方法...我会以为display：none技巧就行了。

!!! 警告 ！！！

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

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;" />' );
    }
};

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

这个似乎对我有用

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

比赛迟到了，但其中大多数似乎都相当复杂。

这是我的操作方式：

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>