0



私は次のシナリオを達成する必要があります。私はやったし、それはFirefoxで動作しますが、IEでは動作しません。

シナリオ:

  1. 最初のドロップダウンから値を選択した場合、残りのドロップダウンはそのオプションを非表示にする必要があります。
  2. 最初のドロップダウンからオプションを選択解除すると、残りのドロップダウンで使用できるようになります。
  3. 最後のドロップダウンまで続きます。

次のコードがあります

HTML

<div>
    <select data-label="Question 1" class="u85" id="test1">
        <option value="Please select...">Please select...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>
    </div>
    <div>
        <select data-label="Question 1" class="u85" id="test2">
            <option value="Please select...">Please select...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        </select>
    </div>
    <div>
        <select data-label="Question 1" class="u85" id="test3">
            <option value="Please select...">Please select...</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </div>
    <div>
        <select data-label="Question 1" class="u85" id="test4">
            <option value="Please select...">Please select...</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </div>

次に、次のJqueryがあります

$(document).ready(function(){
        var selectionlist=[];
        $('select').change(function() 
        {   
            var currentid=$(this).attr("id");
            $(this).val()!=="Please select..."?selectionlist[$(this).parent().index()]=$(this).val():selectionlist[$(this).parent().index()]="";
            $('select').each(function(i){
            var currentselectboxid=$(this).attr("id");
                if($(this).val()!=="Please select...")
                    selectionlist[i]=$(this).val();

                    $('#'+$(this).attr("id")+' option').each(function(){

                            $.inArray($(this).val(),selectionlist)!=-1?$(this).hide():$(this).show();
                    });
            });

        });
    });

これは Firefox では正常に機能しますが、IE では機能しません。Google で既に何かを見つけました。

JQuery の非表示オプションが IE と Safari で機能しない

無効にすると正常に動作しますが、私の要件は非表示と表示です。オプションの追加と削除を試みます。しかし、成功しません。

firefox と同じ結果を得るにはどうすればよいですか?

前もって感謝します。

4

2 に答える 2

0

これは役立つかもしれません...

あなたに役立つjQueryプラグインを作成しました。それを使用すると、次のようになります。

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

好きなだけ非表示にしたり表示したりできます。元の順序が維持されます。すべてのブラウザで動作します。このサンプルでそれを見ることができます: jsFiddle - Toggle Dropdown Options

Toggle Dropdown Options プラグインを入手できます。プラグインが気に入らない場合は、そこから JavaScript コードを自分のプロジェクトの JavaScript ファイルにコピーしてください。詳細については、プラグインの[ドキュメントを読む]リンクを参照してください。

于 2014-01-21T23:25:59.433 に答える
0

この答えは、オプションをどこから取得するかによって異なりますが、セットをコレクションに保持します。それぞれに「selected」というプロパティがあり、開始時に「false」に設定されます。次に、このコレクションを使用して各ドロップダウンを作成し、項目の選択値が false に設定されている場合にのみオプションを作成します。ドロップダウンが変更されたら、対応する項目の「選択された」値を「true」に設定し、残りのドロップダウンを再構築します。そうすれば、オプションの非表示/表示または無効化に対処する必要がなくなります。

于 2013-03-30T02:01:41.267 に答える