根据彼此选择的选项从4个选择下拉列表中删除选项？ （允许jquery）

Question

我有四个选择，当在任何一个下拉列表中选择一个选项时，需要从其他三个选项中禁用（不删除）。它应该从那里构建，以便在三个下拉列表中选择的选项不应该在第四个中显示。最重要的是，第一个下拉列表默认会在页面加载时选择一个动态选项，即使在on.change事件之前，也需要从其他三个中删除。我看过几个涉及两个选择而不是四个选项的例子，我知道在jquery中必须有一个简单的方法来做这个。

我已经尝试单独处理第一个选择与负载，其他与下面的代码，但我遇到的问题是当on.change禁用发生它“忘记”关于应该保持禁用的第一个选择选项在其他三个。一次只能禁用一个选项。如果这是一个已回答问题的副本，我真的很抱歉。

HTML：

select class="custom-select uomselect" name="uom1">
  <option>None</option>
  <?php 
  foreach ($unit_list as $unitabbr) {
  echo "<option value=".$unitabbr.">".$unitabbr."</option>";
  }?>  
 </select>

<select class="custom-select uomselect" name="uom2">
  <option>None</option>
  <?php 
  foreach ($unit_list as $unitabbr) {
  echo "<option value=".$unitabbr.">".$unitabbr."</option>";
  }?>  
 </select>

<select class="custom-select uomselect" name="uom3">
  <option>None</option>
  <?php 
  foreach ($unit_list as $unitabbr) {
  echo "<option value=".$unitabbr.">".$unitabbr."</option>";
  }?>  
 </select>

<select class="custom-select uomselect" name="uom4">
  <option>None</option>
  <?php 
  foreach ($unit_list as $unitabbr) {
  echo "<option value=".$unitabbr.">".$unitabbr."</option>";
  }?>  
 </select>

这将使用数据库中的动态选项创建四个选项

Jquery：我正在尝试在页面加载时获得第一个select值，然后为选择设置on.change事件，因此在on.change触发下拉列表中未被选中的选项值将被禁用其他。

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

});

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

谢谢你们。

Answer 1

这就是你要找的东西吗？

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

var previousOption = null;
$('select').on('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').on('click', function(){
  previousOption = $(this).find('option:selected').val();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
  <option selected></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
  <option value="option5">option5</option>
</select>
<select id="select2">
  <option selected></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
  <option value="option5">option5</option>
</select>
<select id="select3">
  <option selected></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
  <option value="option5">option5</option>
</select>
<select id="select4">
  <option selected></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
  <option value="option5">option5</option>
</select>