使用jQuery隐藏IE中的选择选项

Question

目前我使用jQuery使用以下代码隐藏/显示选择选项.

$("#custcol7 option[value=" + sizeValue + "]").hide();

这在Firefox中运行良好,但在其他浏览器中没有任何好处.如何隐藏Chrome,Opera和IE中的选项？

Answer 1

我只是碰到了这个,而不是一遍又一遍地克隆整个选择我只是替换了需要隐藏span元素和隐藏跨度的选项(尽管浏览器还没有在视觉上显示它们,我认为) - 你可能需要改变你的代码(如果很复杂)迭代复杂逻辑的跨度.

跨度存储option对它的引用,并在需要显示时替换它们.

这段代码显然可以重构和美化.

http://fiddle.jshell.net/FAkEK/12/show/

编辑#2(使用这个INSTEAD):我想到,不是做所有这个克隆/引用/替换垃圾,而是用一个span包装选项,隐藏span,然后再显示只需用该选项替换span. .

http://fiddle.jshell.net/FAkEK/25/show/

Answer 2

我认为meder提供了有效的答案,在这里略有改动以反映对我有用的东西:

$.fn.optVisible = function( show ) {
    if( show ) {
        this.filter( "span > option" ).unwrap();
    } else {
        this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
    }
    return this;
}

测试(长期使用BrowserStack):

• Windows XP:IE 6.0,Firefox 3.0,Safari 4.0,Opera 10.0,Chrome 14.0
• Windows 8:IE 10.0 Metro
• iOS 3.2(iPad),iOS 6.0(iPhone 5)
• Android 1.6(索尼Xperia X10)

的jsfiddle

Answer 3

你没有,它在IE中不受支持(并且可能不支持Chrome或Opera).如果您希望它们真正不可见,则必须完全删除这些选项并稍后再添加它们.但在大多数情况下,简单disabled="disabled"就足够了,并且比处理删除和添加选项简单得多.

Answer 4

尝试分离().如果需要,可以使用append()或insertAfter()重新附加它

Answer 5

要删除选项,请使用:

var opt=$("option").detach();

显示选项使用:

opt.appendTo( "select" );