私は以下のシナリオを達成する必要があります。
シナリオ：
- 最初のドロップダウンから値を選択した場合、残りのドロップダウンはそのオプションを非表示にする必要があります。
- 最初のドロップダウンからこのオプションを選択解除した場合は、残りのドロップダウンで利用できるはずです。
- 最後のドロップダウンまで続きます。
私は次のコードを持っています
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();
});
});
});
});
これはIEではなくFirefox.Butでうまく機能します。Googleで何かが見つかっています。
JQuery Hide OptionがIEおよびSafariで機能しない
無効にしても問題はありません。私の要件は非表示にすることです。オプションの追加と削除を試みます。しかし成功を狙うわけではありません。
どのように私はFirefoxのように同じ結果を達成することができますか？
前もって感謝します。
回答：
回答№1は0この答えはあなたがあなたの所に来ている場所によって異なりますからのオプションが、私はコレクションのセットを保持するでしょう。それぞれが "selected"というプロパティを持ち、起動時に "false"に設定されます。次に、このコレクションを使用して各ドロップダウンを作成し、項目の選択値がfalseに設定されている場合にのみオプションを作成します。ドロップダウンが変更されたら、対応する項目の「選択」値を「true」に設定します。そうすることで、オプションを隠したり表示したり無効にしたりする必要がなくなります。
回答№2の場合は0
これは役立つかもしれません...
私はあなたに役立つはずのjQueryプラグインを作りました。それを使えば、次のようになります。
$("#selection1").hideOption("1");
$("#selection1").showOption("1");
あなたはあなたが好きなだけそれらを隠したり見せたりすることができます - 彼らは元の順番を保ちます。全てのブラウザで動作します。あなたはこのサンプルでそれを見ることができます： jsFiddle - ドロップダウンオプションの切り替え
あなたは ドロップダウンオプションプラグインの切り替え。プラグインが気に入らない場合は、そこからJavaScriptコードを自分のプロジェクトのJavaScriptファイルにコピーするだけです。を参照してください ドキュメントを読む 詳細については、プラグインをリンクしてください。