Удалить параметры из 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: я пытаюсь получить значение первого выбора при загрузке страницы, затем имею события 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>