javascript/jQueryを使用してドロップダウンから値を削除して追加します

Question

私のコードで次のことを達成しようとしていますが、複雑になっています。 私はそれに重複した値の有無にかかわらずドロップダウンを持っています。簡単にするために

は、次のシナリオを想定することができます：

dropdown1：

<select> 
<option>100</option> 
<option>200</option> 
<option>102</option> 
</select> 

ドロップダウン2：

<select> 
<option>100</option> 
<option>200</option> 
<option>201</option> 
</select> 

dropdown3：

<select> 
<option>100</option> 
<option>300</option> 
<option>301</option> 
</select> 

ケース1： ユーザーがドロップダウン1から値100を選択すると、すべてのドロップダウンから100を削除し、ドロップダウン1の値を100から200に変更すると100がすべてのドロップダウンに追加され、200がすべてのドロップダウンから削除されます。

削除は簡単ですが、値を追加するのは少し難しいです。

追加する値と複数の値を変更する場所を覚えておくために、リストやその他のデータ構造を維持するにはどうすればよいですか？任意の事前jquery機能または私が使用できるジェネリックjavacriptロジックはありますか？

Answer 1

代わりにdisplayをnoneに設定する方がよいでしょう。したがって、適切な順序で追加または削除するという複雑さを避けることができます。 したがって、簡単に表示することができます。

$("option").each(function(index) { 
    $(this).css("display", ""); 
}); 

Answer 2

$("#drop").change(function() { 
var selected_value=$(this).val(); 
var dropdown=$(select); 
for(i=0;i<dropdown.length;i++){ 
$("dropdown[i] option[value=selected_value]").remove(); 
} 
}); 

最初のドロップダウンのセットIDは=値を選択し、それが十分である場合、それは場合値= selected_value

Answer 3

ページで削除オプションを使用してドロップダウンを介して可変ループS定義ここ を「ドロップ」実際にそれを削除するのではなくオプションを無効にするには、以下の方法が役に立ちます。最初にサイトをロードするときには、selectsの処理を調整することをお勧めします。

$('select option[value="' + $('select').eq(0).val() + '"]').not(':eq(0)').prop('disabled', true); 
 

 
$('select').on('change', function() { 
 

 
    var val = $(this).val(); 
 

 
    $('select option').prop('disabled', false); 
 
    $('select option[value="' + val + '"]').not($(this)).prop('disabled', true); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value='100'>100</option> 
 
    <option value='200'>200</option> 
 
    <option value='102'>102</option> 
 
</select> 
 
<select> 
 
    <option value='100'>100</option> 
 
    <option value='200'>200</option> 
 
    <option value='201'>201</option> 
 
</select> 
 
<select> 
 
    <option value='100'>100</option> 
 
    <option value='300'>300</option> 
 
    <option value='301'>301</option> 
 
</select>