Как сделать взаимоисключающий option в 2х select?

Question

Всем привет!

Есть 2

<div class="destination_select">
    <div>
        <select name="destination_from" id="destination_from">
            <option value="Ташкент">Ташкент</option>
            <option value="Москва">Москва</option>
        </select>
    </div>
    <div>
        <select name="destination_to" id="destination_to">
            <option value="Москва">Москва</option>
            <option value="Ташкент">Ташкент</option>
        </select>
    </div>
</div>

Логика такая: Если в одном select выбрана, например, Москва, то во втором select нельзя было выбрать Москву и т.д. То есть при выборе одного option, аналогичный option в другом select должен быть недоступен

Пробовал так:

 $("#destination_from").on("change", function(){
    var optionValue = $('#destination_from').val();
    $("#destination_to option[value='" + optionValue + "']").attr("disabled", "disabled");
 });

Код работает, но если менять первый select, значения во втором не включаются обратно. Плюс код работает только при смене select.

Answer 1

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

const DESTINATION = document.querySelector('.destination_select');
DESTINATION.addEventListener('change', function(ev) {
  let target = ev.target;
  let select = [...this.querySelectorAll('select')];
  let active = select.find((el) => el != target);
  [...active.options].forEach((el) => {
    el.disabled = el.value == target.value;
  });
});

.destination_select { display: flex; justify-content: center; gap: 10px; }
option:disabled { color: lightgrey; }

<div class="destination_select">
  <div>Откуда:
    <select name="destination_from" id="destination_from">
      <option selected disabled hidden>Выберите город</option>
      <option value="Ташкент">Ташкент</option>
      <option value="Москва">Москва</option>
      <option value="Минск">Минск</option>
      <option value="Киев">Киев</option>
    </select>
  </div>
  <div>Куда:
    <select name="destination_to" id="destination_to">
      <option selected disabled hidden>Выберите город</option>
      <option value="Ташкент">Ташкент</option>
      <option value="Москва">Москва</option>
      <option value="Астана">Астана</option>
      <option value="Минск">Минск</option>
      <option value="Киев">Киев</option>
      <option value="Баку">Баку</option>
    </select>
  </div>
</div>

"The trouble of our time are ignoramuses, lazy and boors."

БЛОГ НА HUSL

Как сделать взаимоисключающий option в 2х select?

Ответы (1 шт):