Javascript 是否从4个“选择”下拉列表中根据每个下拉列表中的选定选项删除选项？（允许使用jquery）

我有四个选项，当在任何一个下拉列表中选择一个选项时，它需要从其他三个选项中禁用（而不是删除）。它应该在此基础上构建，这样在三个下拉列表中选择的选项就不会显示在第四个下拉列表中。除此之外，第一个下拉列表在页面加载时默认会有一个选中的动态选项，即使在发生On.change事件之前，也需要从其他三个下拉列表中删除该选项。我已经看到了几个涉及两个选择而不是四个选择的示例，我知道在jquery中必须有一种简单而流畅的方法来实现这一点

我已经试着用加载单独处理第一个选择，用下面的代码处理其他选择，但是我遇到的问题是，当发生on.change禁用时，它“忘记”了在其他三个选项中应该保持禁用的第一个选择选项。一次仅禁用一个选项。如果这是一个重复的问题，我真的很抱歉

html:

理想的结果是：所有四个选择都将阻止用户选择一个选项两次，但也允许用户以任何顺序修改其选择。目前，我的代码没有正确跟踪所有选择，并且在使用多个下拉列表时，没有在所有选择中禁用选项

---

谢谢大家。

这就是你们要找的吗

$('select').on('change', function(){
  const selectedOption = $(this).find('option:selected').val();
  $(`[value="${selectedOption}"]:not(:selected)`).attr('disabled', true)
})

var-previousOption=null；
$（'select'）。在（'change'，function（）上{
const selectedOption=$（this.find（'option:selected'）.val（）；
$（`[value=“${previousOption}]]：disabled`）.attr（'disabled'，false）；
previousOption=null；
$（`[value=“${selectedOption}”]：not（：selected）`）.attr（'disabled'，true）；
})
$（'select'）。在（'click'，function（）上{
previousOption=$（this.find（'option:selected'）.val（）；
});

选择1
选择2
选择3
选择4
选择5
选择1
选择2
选择3
选择4
选择5
选择1
选择2
选择3
选择4
选择5
选择1
选择2
选择3
选择4
选择5
不幸的是，您的代码并非始终有效。如果我从前两个下拉列表中选择，然后更改第一个选择，我的第一个选择将被禁用（因此选择了两个选项，但三个选项变灰）。您是否尝试过代码的当前版本？你提到的问题在我发布答案时就出现了，但我几乎立即注意到并解决了这个问题。现在，它可以很好地工作（至少在Chrome/FF中）。谢谢，所以我有4个选项-每个选项都有这个列表（Kgs、Bags、Bundles、Cartons）。你的代码是这样的：当我从select1中选择Kgs时，它在2、3和4中被禁用。然后我从2中选择“行李”，从3和4中禁用KG和行李。现在，如果我在“选择1”中将KG更改为捆绑包，当KG再次成为可选选项时，KG、袋子和捆绑包都会在3,4中显示为灰色。你在我的帖子中尝试过现场演示吗？它做的正是您期望它应该做的（至少在两个主要的浏览器中，正如我上面提到的）。很抱歉，我没有看到您上面发布的其余代码。很好！我认为你的答案是最好的。干杯
   $(document).ready(function(){

              function getprimaryunitval() {
              return $('select[name=uom1]').val()

              }
              var primaryuom = getprimaryunitval();





 var dropdowns = $(".uomselect");
 dropdowns.change(function()
    {
 dropdowns.find('option').removeAttr('disabled', "false");
 dropdowns.find('option:not(:selected)[value="'+$(this).val()+'"]').prop('disabled', "true");
   });

});

$('select').on('change', function(){
  const selectedOption = $(this).find('option:selected').val();
  $(`[value="${selectedOption}"]:not(:selected)`).attr('disabled', true)
})