Блог

У меня есть четыре выбора, и когда в любом выпадающем списке выбран один параметр, его необходимо отключить (не удалять) из трех других. Он должен строиться оттуда, чтобы параметры, выбранные в трех выпадающих списках, не отображались в четвертом. Кроме того, в первом выпадающем списке по умолчанию будет выбран динамический параметр при загрузке страницы, который необходимо удалить из трех других, даже до события 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");
   });

});
  

Идеальный результат: все четыре выбора не позволят пользователю дважды выбирать опцию, но также позволят им изменять свои варианты в любом порядке. В настоящее время мой код не отслеживает все выбранные должным образом, и параметры не отключаются во всех выборках, когда используется более одного выпадающего списка.

Спасибо вам всем.

Это то, что вы ищете?:

 $('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>