JQuery 隐藏选项在 IE 和 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!

这是我的脚本:

    <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 隐藏选项在 IE 和 Safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！