从彼此选择的选项中选择4个下拉菜单中的选项删除？ （允许使用jQuery）

Question

我有四个选择，并且在任何一个下拉菜单中选择一个选项时，都需要将其从其他三个中禁用（不删除）。它应该从那里开始构建，这样在三个下拉列表中选择的选项就不会在第四个下拉列表中显示。最重要的是，默认情况下，第一个下拉菜单将在页面加载时具有一个选定的动态选项，即使在on.change事件发生之前，也需要将其从其他三个下拉列表中删除。我已经看到了几个涉及两个选择但不涉及四个选择的示例，而且我知道在jquery中必须有一种简单流畅的方法来做到这一点。

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

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：我正在尝试在页面加载时获取第一个选择的值，然后为选择添加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>