刪除另一個選擇框中的現有選定選項

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> 

但我不希望發生這種情況。

我想限制從選擇選項「一個」上「BOX2」，反之亦然，限制從上「BOX1」

換句話說選擇選項「c」的用戶的用戶，用戶可以不接'c'在box1上，也不能在box2上選擇'a'。他們唯一可以在box1上選擇'c'的時間是如果他們改變box2的選定值。

Answer 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); 

有了，你應該能夠改變一個，然後它會從所有的休息被刪除，也當一個人改變應該更新所有。

Answer 2

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

對於第一個框：

$("#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"); 
    }); 
}) 

請記住，你可以完全優化這是一個奇異的功能，但我認爲這更清楚地告訴你正在發生的事情。

我們獲得盒子值，然後迭代另一盒的選項列表，禁用匹配的盒子，並啓用不匹配的盒子值。