Как связать два select?

Question

Помогите, пожалуйста, с решением данной задачи. Есть два select в разметке

<fieldset class="ad-form__element">
      <label class="ad-form__label" for="room_number">Количество комнат</label>
      <select id="room_number" name="rooms">
        <option value="1" selected>1 комната</option>
        <option value="2">2 комнаты</option>
        <option value="3">3 комнаты</option>
        <option value="100">100 комнат</option>
      </select>
    </fieldset>
    <fieldset class="ad-form__element">
      <label class="ad-form__label" for="capacity">Количество мест</label>
      <select id="capacity" name="capacity">
        <option value="3" selected>для 3 гостей</option>
        <option value="2">для 2 гостей</option>
        <option value="1">для 1 гостя</option>
        <option value="0">не для гостей</option>
      </select>
    </fieldset>

Нужно сделать так, чтобы при выборе комнат были ограничения на кол-во гостей.

1 комната — «для 1 гостя»;
2 комнаты — «для 2 гостей» или «для 1 гостя»;
3 комнаты — «для 3 гостей», «для 2 гостей» или «для 1 гостя»;
100 комнат — «не для гостей»

Нужно таким образом сравнивать два select и если выбранное количество гостей не подходит под количество комнат, нужно вызывать метод setCustomValidity

Можете пожалуйста написать как можно это реализовать? Не знаю с чего начать и каким образом производить сравнение. Возможно тут объекты нужны. Заранее спасибо!

Answer 1

Как-то так (код, наверное, можно оптимизировать, но логика примерно такая):

$('#room_number').change(function(){
	if($(this).val() == 1) {
  	$('#capacity').prop('selectedIndex', 0);
    $('#capacity .for-one').removeAttr('hidden');
    $('#capacity .for-two, #capacity .for-three, #capacity .no-guests').attr('hidden','hidden');
  }
	else if($(this).val() == 2) {
  	$('#capacity').prop('selectedIndex', 0);
  	$('#capacity .for-two').removeAttr('hidden');
    $('#capacity .for-three, #capacity .no-guests').attr('hidden','hidden');
  }
  else if($(this).val() == 3) {
  	$('#capacity').prop('selectedIndex', 0);
    $('#capacity .for-two, #capacity .for-three').removeAttr('hidden');
    $('#capacity .no-guests').attr('hidden','hidden');
  }
  else if($(this).val() == 100) {
    $('#capacity .no-guests').removeAttr('hidden').attr('selected','selected');
    $('#capacity .for-one, #capacity .for-two, #capacity .for-three').attr('hidden','hidden');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="ad-form__element">
  <label class="ad-form__label" for="room_number">Количество комнат</label>
  <select id="room_number" name="rooms">
    <option value="1" selected>1 комната</option>
    <option value="2">2 комнаты</option>
    <option value="3">3 комнаты</option>
    <option value="100">100 комнат</option>
  </select>
</fieldset>
<fieldset class="ad-form__element">
  <label class="ad-form__label" for="capacity">Количество мест</label>
  <select id="capacity" name="capacity">
    <option value="1" class="for-one" selected>для 1 гостя</option>
    <option value="2" class="for-two" hidden>для 2 гостей</option>
    <option value="3" class="for-three" hidden>для 3 гостей</option>
    <option value="0" class="no-guests" hidden>не для гостей</option>
  </select>
</fieldset>

Answer 2

const adForm = document.querySelector('.ad-form');
const roomForGuest = {
  1: ['1'],
  2: ['1', '2'],
  3: ['1', '2', '3'],
  100: ['0'],
};

adForm['room_number'].addEventListener('change', (e) => {
  const numberRooms = roomForGuest[e.target.value];
  for (const currentCapacityItem of adForm.capacity.children) {
    currentCapacityItem.disabled = !numberRooms.includes(currentCapacityItem.value);
  }
  adForm.capacity.value = numberRooms[0];
});

БЛОГ НА HUSL

Как связать два select?

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