根據彼此選擇的選項從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>