Задать вопрос
@fgehte
javascript

Как сделать проверку в select?

Всем привет!) Подскажите как реализовать след. проверку
В общем, нужно чтобы при выборе количество комнат, в поле с количеством гостей оставалось нужное кол-во гостей
Пример:
комнат = 1, кол-во гостей 1 (остальные удалены из DOM)
комнат = 2, кол-во гостей 1 и 2 (остальные удалены из DOM)
комнат = 3, кол-во гостей 1, 2 и 3 (остальные удалены из DOM)
комнат = 10, кол-во гостей = "нет гостей" (остальные удалены из DOM)
<fieldset>
  <label for="field-one">Количество комнат</label>
  <select id="field-one" name="rooms">
    <option value="1" selected>1 комната</option>
    <option value="2">2 комнаты</option>
    <option value="3">3 комнаты</option>
    <option value="10">10 комнат</option>
  </select>
</fieldset>
<fieldset>
  <label for="field-two">Количество мест</label>
  <select id="field-two" name="capacity">
    <option value="1" selected>1 гость</option>
    <option value="2">2 гостя</option>
    <option value="3">3 гостя</option>
    <option value="0">нет гостей</option>
  </select>
</fieldset>
  • Вопрос задан
  • 287 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@Comsequent
Пишу потихоньку.
onchange на первый селект. В колбэке формируем новый набор опций для второго селекта.
Ответ написан
Комментировать
Комментировать
@fixeri 
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select id="field-one"> </select>

	<select id="field-two"> </select>
	
	
	<script type="text/javascript">
		"use strict";		

		let select1 = [
			{
				id: 0, 
				text: '1 комната'
			}, {
				id: 1,
				text: '2 комнаты'
			}, {
				id: 2,
				text: '3 комнаты'
			}, {
				id: 3,
				text: '10 комнат'
			}
		];

		let select2 = [
			{
				id: 0,
				is: [0, 1, 2],
				text: '1 гость'
			}, {
				id: 1,
				is: [1, 2],
				text: '2 гостя'
			}, {
				id: 2,
				is: [2],
				text: '3 гостя'
			}, {
				id: 3,
				is: [3],
				text: 'Нет гостей'
			}
		];

		let fieldOne = document.getElementById("field-one");
		let fieldTwo = document.getElementById("field-two");

		createOptions(fieldOne, select1);
		eventChange.call(fieldOne, fieldTwo);

		fieldOne.addEventListener("change", eventChange.bind(fieldOne, fieldTwo));

		function eventChange(field) {
			field.textContent = "";
			let filtered = select2.filter(o => o.is.includes(+this.value));
			createOptions(field, filtered);
		}

		
		function createOptions(field, arrO) {
			for (let o of arrO) {
				let option = document.createElement("option");
				option.textContent = o.text;
				option.setAttribute("value", o.id);
				field.append(option);
			}
		}
	</script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать простейшего голосового ассистента на c++ и winform
18 дек. 2024, в 23:08
1000 руб./за проект
Доработать функционал сайта
18 дек. 2024, в 20:59
3000 руб./за проект
Веб сервис для печатной мастерской (php+laravel+mysql)
18 дек. 2024, в 19:48
100000 руб./за проект
Ещё заказы