1

Всем привет!

Есть 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.

1
  • Не совсем понятен сценарий всего действа... Вот появились селекты Ташкент и Москва. Выбираю в первом Москва - что делать со вторым селектом? В обоих селектах всегда будет одинаковое количество городов? Что делать если их будет больше двух?
    – ksa
    12 янв в 17:35

1 ответ 1

2

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

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."

1
  • 1
    Спасибо за помощь! 13 янв в 6:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.