从 4 个 select 下拉菜单中删除基于彼此 selected 选项的选项？（jquery 允许）

Question

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

我试图通过加载单独处理第一个 select，并使用下面的代码处理其他的，但我遇到的问题是当 on.change 禁用发生时 'forgets' 关于第一个 select 选项应该在其他三个选项中保持禁用状态。一次只能禁用一个选项。如果这是已回答问题的重复，我深表歉意。

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>

这将创建四个 selects，其中包含来自数据库的动态选项

Jquery：我试图在页面加载时获取第一个 select 的值，然后为 select 设置 on.change 事件，所以相同未成为 on.change 触发下拉列表中的 selected 选项的选项值将在其他选项中被禁用。

   $(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 都将阻止用户 select 两次选择一个选项，但也允许他们以任何顺序修改他们的选择。目前，我的代码没有正确跟踪所有 select，并且当使用了多个下拉菜单时，所有 select 中的选项都没有被禁用。

谢谢大家

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>

从 4 个 select 下拉菜单中删除基于彼此 selected 选项的选项？（jquery 允许）

Remove options from 4 select dropdowns based on selected options in each other? (jquery allowed)

javascript

jquery

select

options

从 4 个 select 下拉菜单中删除基于彼此 selected 选项的选项？ （jquery 允许）

Remove options from 4 select dropdowns based on selected options in each other? (jquery allowed)

javascript

jquery

select

options

从 4 个 select 下拉菜单中删除基于彼此 selected 选项的选项？（jquery 允许）