別の選択ボックスで既存の選択されたオプションを削除する

Question

私の問題は複数の（2つ以上の）選択ボックスがあり、選択したデータがJSONファイルのものであるということです。

このようにする必要があります。

たとえば、私は2つの選択ボックスがあり、その選択ボックスのデータは「a」と「c」です。選択ボックスは基本的に次のようになります

<select id ="box1"> 
<option value='a'selected>a</option> 
<option value='b'>b</option> 
<option value='c'>c</option> 
</select> 


<select id ="box2"> 
<option value='a'>a</option> 
<option value='b'>b</option> 
<option value='c' selected>c</option> 
</select> 

しかし、私はこれが起こりたくありません。私は他の言葉で「BOX1」

のオプション「C」を選択するからユーザーを制限し、「」「BOX2」とその逆のオプションを選択からユーザーを制限したい

、ユーザーが選択することはできません'c'をbox1に置くこともできず、box2では 'a'を選ぶこともできません。ボックス1のオプション 'c'を選択できる唯一の時間は、ボックス2の選択値を変更する場合です。最初のボックスのために

Answer 1

これは基本的にはページロード時に選択したすべてのページをループし、選択したページの負荷に応じて表示する必要があるかどうかを判断する必要があります。あなたは1を変更することができるはずでhttps://jsfiddle.net/yps07yf5/3/

function checkTheDropdowns(){ 
    var arr = $('select').find(':selected'); 
    $('select').find('option').show(); 
    $.each($('select'), function(){ 
    var self = this; 
    var selectVal = $(this).val(); 
    $.each(arr, function(){   
     if (selectVal !== $(this).val()){ 
       $(self).find('option[value="'+$(this).val()+'"]').hide() 
     } else { 
       $(self).find('option[value="'+$(this).val()+'"]').show() 
     } 
    }); 
}) 
}; 
checkTheDropdowns(); 
$('select').on('change', checkTheDropdowns); 

し、それは1つが変更されたときにも、それはすべて更新する必要があり、すべての残りの部分から除去される。ここで

はフィドルです。

Answer 2

https://jsfiddle.net/yps07yf5/1/

：2番目のボックスのために

$("#box1").on("change", function() { 
    let $boxval = $("#box1").val(); 

    $("#box2 > option").each(function(ind) { 
    let ele = $("#box2 > option").eq(ind); 
    if (ele.val() === $boxval) ele.attr("disabled", "disabled"); 
    else ele.removeAttr("disabled"); 
    }); 
}); 

$("#box2").on("change", function() { 
    let $boxval = $("#box2").val(); 

    $("#box1 > option").each(function(ind) { 
    let ele = $("#box1 > option").eq(ind); 
    if (ele.val() === $boxval) ele.attr("disabled", "disabled"); 
    else ele.removeAttr("disabled"); 
    }); 
}) 

あなたは絶対にこれは単数形の関数であることを最適化する可能性に注意してください、私はこのことを考えます何が起こっているのかを理解するために、より明確になっています。

ボックスの値を取得し、他のボックスのオプションのリストを反復し、一致するものを無効にし、一致しないものを有効にします。