web-dev-qa-db-ja.com

JQuery非表示オプションはIEおよびSafariでは機能しません

.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 />
jqueryinternet-explorersafarioption
17
James Lin

これは機能します。showを.showOptionおよび.hideOptionに変更します。ただし、Firefoxでは選択されているオプションを非表示にできるため、これでもIE "。

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

あなたが正しい。一部のブラウザでは、option要素を非表示にできません。おそらくそれらを削除する必要があります。

おそらくより良い（または少なくとも代替の）可能性はそれらを無効にすることでしょうが。

$(".wrapper1").prop('disbled', true);
8
RightSaidFred

option要素を削除する必要があります。display:noneでそれらを非表示にすることは、多くのブラウザでサポートされていません。

隠す

var elems = $(".wrapper1").remove();

公演

$('#candy').append(elems);
5
Jim Jose

オプションの周りに_<span>_を使用するソリューションを試しましたが、すべてのブラウザーで機能するとは限りませんでした。

これを非常にうまく解決するjQueryプラグインを作成しました。それで、あなたはこれをするでしょう：

_$('#selection1').hideOption('1');
$('#selection1').showOption('1');
_

必要なだけ非表示および表示でき、元の順序と、optionに割り当てた.data('x')値が保持されます。すべてのブラウザで動作します。このサンプルでそれを見ることができます： jsFiddle-ドロップダウンオプションの切り替え

ドロップダウンオプションの切り替えプラグイン を取得できます。プラグインが気に入らない場合は、プラグインから自分のプロジェクトのJavaScriptファイルにJavaScriptコードをコピーするだけです。詳細については、プラグインの ドキュメントを読む リンクを参照してください。

4
Glen Little

これに対する1つの回避策を見つけました。非表示にするオプションにJquerywrap（））でラップするだけで、自動的に非表示になり、unwrap（）でスパンをアンラップして再度表示します。

1
Bharat Parmar

私はさまざまな方法で試しましたが、この解決策は妥当なようで、コードで使用しました。プラグインは必要ありませんjqueryオブジェクトとの単純な登録関数

一目でわかる解決策：

(function ($) {


$('#showOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', true);
});

$('#hideOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', false);
});

 $.fn.showHideDropdownOptions = function(value, canShowOption) { 

         $(this).find('option[value="' + value + '"]').map(function () {
            return $(this).parent('span').length === 0 ? this : null;
        }).wrap('<span>').hide();

        if (canShowOption) 
            $(this).find('option[value="' + value + '"]').unwrap().show();
        else 
            $(this).find('option[value="' + value + '"]').hide();

}



})(jQuery);

これが完全な実装です http://jsfiddle.net/8uxD7/3/

0
kinnu