Question

我试图从下拉列表中隐藏一些选项。 JQuery的.hide()和.show()在Firefox和Chrome中运行良好，但在IE中没有运气。

有什么好主意吗？

Answer 1

在许多可能的方法中，此方法需要浏览器嗅探（通常不是很好），但不需要使用相同选择列表的多个副本进行交换。

//To hide elements
$("select option").each(function(index, val){
    if ($(this).is('option') && (!$(this).parent().is('span')))
        $(this).wrap((navigator.appName == 'Microsoft Internet Explorer') ? '<span>' : null).hide();
});

//To show elements
$("select option").each(function(index, val) {
    if(navigator.appName == 'Microsoft Internet Explorer') {
        if (this.nodeName.toUpperCase() === 'OPTION') {
            var span = $(this).parent();
            var opt = this;
            if($(this).parent().is('span')) {
                $(opt).show();
                $(span).replaceWith(opt);
            }
        }
    } else {
        $(this).show(); //all other browsers use standard .show()
    }
});

对此的信任与Dima Svirid完全吻合：http://ajax911.com/hide-options-selecbox-jquery/

Answer 2

提到IE11 navigator.appName返回'Netscape':) 所以考虑到这一点：

$("select option[value='your_option_value']").wrap((navigator.appName == 'Microsoft Internet Explorer' || navigator.appName == 'Netscape') ? '<span>' : null).hide();

Answer 3

我找到了一个相当简单的解决方案，尽管这些选项不会在IE上隐藏但会被禁用。

$('#delivery_time option[value="06:30"]').removeAttr('disabled').show();       // To Show/Enable
$('#delivery_time option[value="06:30"]').attr('disabled', 'disabled').hide(); // To Hide/Disable

在这里，我偶然发现了这两行：IT Support Guides - Internet Explorer – How to hide select options using jQuery

如何在IE中使用JQuery隐藏和显示SELECT选项

3 个答案: