删除另一个选择框中的现有选定选项

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

请记住，你可以完全优化这是一个奇异的功能，但我认为这更清楚地告诉你正在发生的事情。

我们获得盒子值，然后迭代另一盒的选项列表，禁用匹配的盒子，并启用不匹配的盒子值。