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

Question

我意识到Chrome似乎不允许我隐藏<option>在<select>.Firefox会.

我需要隐藏<option>符合搜索条件的s.在Chrome网络工具中,我可以看到display: none;我们的JavaScript 正确设置了它们,但是一旦<select>点击了菜单,就会显示它们.

如何<option>在符合菜单时显示符合我的搜索条件的s？谢谢!

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

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

Answer 2

对于HTML5,您可以使用"隐藏"属性.

<option hidden>Hidden option</option>

IE <11 不支持它.但是如果你只需要隐藏一些元素,那么与添加/删除元素或没有语义正确的构造相比,将隐藏属性与disabled结合使用会更好.

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

参考.

Answer 3

我会建议你做不使用使用该解决方案的<span>包装,因为它不是有效的HTML,这可能导致在路上的问题.我认为首选的解决方案是实际删除您要隐藏的任何选项,并根据需要还原它们.使用jQuery,您只需要这3个函数:

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

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/

Answer 4

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

否则它会包含太多标签

Answer 5

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>

Answer 6

以这种方式选择输入很棘手.如果禁用它,这将跨浏览器工作:

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

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

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

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

更新

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

$('#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

Answer 7

简单回答:你做不到.表单元素的样式功能非常有限.

最好的选择是设置disabled=true选项(也许是灰色,因为只有IE会自动执行此操作),这将使选项无法点击.

或者,如果可以,请完全删除option元素.

Answer 8

// Simplest way

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

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