web-dev-qa-db-ja.com

jQueryを使用してIEで選択オプションを非表示にする

現在、jQueryを使用して、次のコードを使用して選択オプションを非表示/表示しています。

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

これはFirefoxでは正常に機能しますが、他のブラウザーでは効果がありません。 Chromeの選択からオプションを非表示にする方法、OperaおよびIE？

javascriptjqueryhtml-select
54
ITRushn

私はこれに出会ったばかりで、選択全体を何度も複製する代わりに、非表示にする必要があるオプションをspan要素に置き換えて、スパンを非表示にしました（ブラウザはそれらを視覚的に表示しませんでしたが、私は思います） -複雑なロジックのスパンを反復処理するには、コードを変更する必要がある場合があります（複雑な場合）。

スパンはoptionへの参照を格納し、表示する必要がある場合はそれと置き換えます。

このコードは明らかにリファクタリングおよびプリティフィケーションできます。

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

＃2を編集（このインスタンスを使用）：このクローン/参照/置換クラップをすべて行う代わりに、オプションをスパン、スパンを非表示にし、ショーでスパンを再度オプションで置き換えます。

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

44
meder omuraliev

私は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（Sony Xperia X10）

jsfiddle

28
nrodic

IEではサポートされていません（そして、おそらくChromeまたはOperaどちらか）ではサポートされていません。オプションを完全に削除し、本当に非表示にする場合は後で追加し直す必要があります。しかし、ほとんどの場合、単純なdisabled="disabled"で十分であり、オプションの削除や追加を処理するよりもずっと単純です。

10
Tatu Ulmanen

detach（）を試してください。必要に応じて、append（）またはinsertAfter（）を使用して後で再接続できます

9
murraybiscuit

オプションを削除するには：

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

オプションを表示するには：

opt.appendTo( "select" );
7
Sachin B. R.

削除して、JavaScriptの変数に保存してください。後で必要なときに新しいオブジェクトを作成できます。

それ以外の場合は、上記のdisabled属性を試してください。

3
JP Silvashy

あなたがやった方法はchromeで動作するはずですが、nvm.Hereは別の方法です

select = $('#custcol7');
select.find('option[value=["'+sizeValue +'"]').remove();

もう一度表示したい場合：

select.append('<option value="'+sizeValue+'"></option>');

それはすべてのブラウザーとその本当にシンプルなコードで完璧に動作します。問題は、いくつかのオプションを非表示にする場合、より多くの入力が必要になることですが、動的に変化しない場合は変数に入れることで解決できます。

var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>';

select.append(options);

いくつかの場所で削除/追加する必要がある場合は、この方法でオプションを1回入力するだけです。宜しくお願いします。

2
Lachezar Raychev
/**
* Change visibility of select list option elements
* @param  {boolean}   stateVal      show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it's current state
*/
$.fn.toggleOptionVisibility = function (stateVal) {
    var isBool = typeof stateVal === "boolean";
    return this.each(function () {
         var $this = $(this);
         if (isBool) {
             if (stateVal) $this.filter("span > option").unwrap();
             else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
         }
         else {
             $this.filter("span > option").toggleOptionVisibility(true);
             $this.filter(":not(span > option)").toggleOptionVisibility(false);
        }
    });
};
2
AuthorProxy

authorProxyが提供するソリューションを使用すると、IEに対して正常に動作しますが、Firefoxのドロップダウンで.val（）を実行しようとすると、意味のないファンキーな値が得られます。ブラウザ固有の機能を含めるようにオプションを変更しました。Firefoxの非表示/表示は機能します。

$.fn.toggleOptionVisibility = function (stateVal) {
    var isBool = typeof stateVal === "boolean";
    return this.each(function () {
        var $this = $(this);
        if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) {
            if (isBool) {
                if (stateVal) $this.filter("span > option").unwrap();
                else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
            }
            else {
                $this.filter("span > option").toggleOptionVisibility(true);
                $this.filter(":not(span > option)").toggleOptionVisibility(false);
            }   
        }
        else {              
            if (isBool) {
                $this.show();
            }
            else {
                $this.hide();
            }
        }
    });
};
1
Chris Brickhouse

私の意見は他の答えとは少し異なります。

目的は、オプションを非表示にすることではなく、それらを無効にすることです（UIの一貫性を保つため）。

私のシナリオ：

フォームに複数の選択があり、ユーザーがいずれかの選択でオプションを選択すると、他の選択でこのオプションが無効になり、逆も同様です。ユーザーは、すでに選択されている同じオプションを選択することを制限されています。通常はオプションを無効にしますが、IE 7ではサポートされません。ユーザーは新しい選択を追加するオプションも取得します。

解決策：

負荷時：

ブラウザーがIE7の場合、選択を設定し、他の選択で既に選択されているオプションを無効にすると、カスタム属性をoption（ "data-ie7-disabled"）に追加し、無効なオプションの色を '#cccccc'（無効なオプションの標準色）。これにより、ブラウザ間でUIが同じに見えます。

変更時：

前のオプションをローカル変数に保存します（これはフォーカス時に保存されます）。

ユーザーがオプションを変更しようとしたとき

  1. ユーザーは、他のドロップダウンで選択されていない完全に新しいオプションを選択します。次に、他の選択をループして色を変更し、他の選択でこの選択オプションにカスタム属性を追加します。

  2. ユーザーが既に選択されているオプションを選択した場合（色がグレー表示されているオプション）。最初にオプションにこのカスタム属性があるかどうかを確認します。その場合は、「このオプションはすでに選択されているか、BLAH BLAH」というエラーメッセージを表示して、オプションを前のオプションに戻すだけです。

  3. ユーザーが既存のオプションを他のドロップダウンで選択されていない新しいオプションに変更したとき。再度、他のすべての選択オプションをループし、その色とカスタム属性を削除します。

お役に立てれば。

1
Venkata Tata

var $opt=$('select>option').clone()と$('select option[value="'+val+'"').remove()の組み合わせで使用できます。別の例があります：これを試してください。 https://jsfiddle.net/sherali/jkw8fxzf/12/

var $secondOption= $('#second-choice>option').clone();

$("#first-choice").change(function() {
    var userSelected = $(this).val();

    $('#second-choice').html($secondOption);
    $('#second-choice option[value="'+userSelected+'"').remove()
});
1
Sherali Turdiyev

.loadメソッドもあります。

s_parent.change(function(){
   s_child.load('./fetch_options.php",{'v',s_parent.val()});
}

「fetch_options.php」スクリプトは、使用するデータソースと渡される親値に基づいてオプションタグを単に印刷します。

1
mstone42

IE 11（Edge）では、次のコードが機能しています。

 $("#id option[value='1']").remove();

広告するために、

$('<option>').val('1').text('myText').appendTo('#id');
0
Jobin Mathew

Select内でhtmlを置き換えることもできます。

HTML：

<input id="Button1" type="button" value="hide option" />

<select id="foo">
<option >stuff</option>
<option >stuff2</option>
</select>

Jquery：

    $("#Button1").change(function () {
       $('#foo').html('<option >stuff</option>');
    });

まさにあなたが望むものではありませんが、おそらくそれは役立ちます。小さいドロップダウンの場合、間違いなく簡単です。

0
mr.Eli

これを使用できます：

$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});

SafariおよびOperaを除くすべてのブラウザーで正常に動作します。私は別の最良の解決策を探しています:)

0
Docteur1er

これを削除してから、Internet Explorer用に再度追加する必要があります。

削除する：

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

たす：

$("#custcol7").append( "<option value='sizeValue'>sizeValue</option>" );

実際に何かを見るには、オプションテキストにもsizeValueが必要であることに注意してください。

0
Aris

mederの解決策は私がこれに取り組んだものですが、すでにスパンにあったスパンでオプションをラップしないようにするための小さな調整があります：

$.fn.hideOption = function() {
    this.each(function() {
        if (!$(this).parent().is('span')) {
            $(this).wrap('<span>').hide();
        }
    });
};
$.fn.showOption = function() {
    this.each(function() {
        var opt = $(this).find('option').show();
        $(this).replaceWith(opt);
    });
};
0
gazchap