JQuery Hide Option在IE和Safari中不起作用 [英] JQuery Hide Option doesn't work in IE and Safari

问题描述

我正在尝试使用.hide（）在下拉框中隐藏一些选项。这在firefox和chrome中运行得非常好，但它在IE和Safari中不起作用。我的原始代码更复杂，但我已将其缩小到这一点。

I'm trying to hide a few options in a dropdown box using .hide(). This works perfectly fine in firefox and chrome, but it doesn't work in IE and Safari. My original code is more complex but I've narrowed it down to this.

我尝试了几种组合，但没有任何效果。

I've tried several combinations and nothing has worked.

.hide（）有效，但由于某种原因不适用于选项标签内的内容。

.hide() works, but not for things within option tags for some reason.

有人可以请帮我？这让我疯了。非常感谢您抽出时间帮助！

Can someone please help me? This is driving me nuts. Thank you so much for taking the time help!

这是我的jscript：

Here's my jscript:

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".wrapper1").hide();
        });
    </script>

这是HTML：

                <label for="prodName">Product Name:</label> 
                <input type="text" name="prodName" /><br />

                <label for="candy">Candy:</label> 
                <select name="candy" id="candy">
                        <option value="0" class="blank" selected="selected"></option><!-- PHP and JS validators should not allow "0" here. User should be prompted to select something. -->
                        <option value="1" class="wrapper1">Hide this 1</option>
                        <option value="2" class="wrapper1">Hide this 2</option>
                        <option value="3" class="wrapper2">Show this 1</option>     
                </select><br />

推荐答案

这将有效..将.show更改为.showOption和.hideOption。
但是这在IE中仍然很糟糕，因为在Firefox中你可以隐藏一个被选中的选项。因此，如果显示选择一个并隐藏。 Firefox仍然会说选择一个。

This will work.. change .show to .showOption and .hideOption. However this still kind of sucks in IE because in firefox you can make it hide an option which is selected. So if "Select One" is shown and is hidden. Firefox will still say "select one".

$.fn.showOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).replaceWith(opt);
            $(span).remove();
        }
        opt.disabled = false;
        $(opt).show();
    }
});
return this;
}
$.fn.hideOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).hide();
        } else {
            $(opt).wrap("span").hide();
        }
        opt.disabled = true;
    }
});
return this;
}

这篇关于JQuery Hide Option在IE和Safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！