JQueryステップを使用しています.1番目と2番目のステップには、複数の選択オプションがあるドロップダウンがあります。
<select name="numbers" id="numbers">
<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>
</select>
ステップ2で（ステップ1と同じですが、目的が異なります）
<select name="allocate_numbers" id="allocate_numbers">
<option value="1">1</option>
: : :
</select>
これで、3番目のステップに3番目のドロップダウンがあります。ここでは、次のような選択ボックスが必要です。ステップ1、ステップ21,2でユーザーが選択したと3,4します。
今、私はステップ3だけを含むselectboxが欲しいです5,6。
どうやってするか？
補足：ステップ1とステップ2のドロップダウンの重複エントリを防ぐために検証を行いました。つまり、ユーザーがステップ1で1,2を選択した場合、ステップ2で1,2を選択することはできません。質問に適したタイトルが見つからないので、自由に編集してください。
更新されたより良い答え：
解決策はかなり単純であることがわかりました。最初のドロップダウンで選択されていないすべてのオプションを検索し、他のドロップダウンで選択されていないオプションをフィルタリングします。イベント委任を追加すると、結果は次のようになります。
$(document).on("change", ".numbers", function () {
$("#select1").empty();
$(".numbers:eq(0) option:not(:selected)").filter(function () {
return $(".numbers:gt(0) option[value=" + this.value + "]:selected").length === 0
}).clone().appendTo("#select1");
});
元の答え：
これは本当の脳のねじれであることが判明しました。基本的にあなたはする必要があります：
これが私の試みですが、おそらくもっと簡単な解決策があります：
$("#numbers, #allocate_numbers").on("change", function () {
$("#select3").empty();
var selectedValues = [],
renderedValues = [];
$.merge(selectedValues, $("#numbers").val() || []);
$.merge(selectedValues, $("#allocate_numbers").val() || []);
$("#numbers option, #allocate_numbers option").filter(function () {
if ($.inArray(this.value, selectedValues) === -1) {
if ($.inArray(this.value, renderedValues) === -1) {
renderedValues.push(this.value);
return true;
}
}
return false;
}).clone().appendTo("#select3");
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加