JQuery 隐藏选项在 IE 和 Safari 中不起作用

Question

我正在尝试使用 .hide() 隐藏下拉框中的一些选项。这在 Firefox 和 Chrome 中工作得很好，但在 IE 和 Safari 中不起作用。我的原始代码更复杂，但我已将其范围缩小到此。

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

.hide() 有效，但由于某种原因不适用于选项标记内的内容。

有人可以帮我吗？这让我抓狂。非常感谢您抽出时间提供帮助!

这是我的 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 />

Answer 1

这将起作用..将 .show 更改为 .showOption 和 .hideOption。然而，这在 IE 中仍然有点糟糕，因为在 Firefox 中你可以让它隐藏选定的选项。因此，如果“选择一个”显示并隐藏。 Firefox 仍然会说“选择一个”。

$.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;
}