Как скрыть option в select при выборе другого option в select?



@o058oo

Как реализовать на js скрытие option? Суть такая: в id=»First» при выборе value=»2″ Продать, в id=»Second» нужно скрыть value=»11, 1, 16″, а при выборе value=»1″ Сдать скрыть в id=»Second» value=»12, 14, 15″. Предполагаю, что при выборе value, можно добавлять class=»hide» нужным option, но как это реализовать на js не знаю. Подскажите, пожалуйста.

<select id="First">
	<option value="0">Сделайте выбор</option>
	<option value="2">Продать</option>
	<option value="1">Сдать</option>
	<option value="1-1"> - сдать посуточно</option>
	<option value="1-2"> - сдать помесячно</option>
</select>

<select id="Second">
	<option value="0">Тип недвижимости</option>
	<option value="12">Продать квартиру</option>
	<option value="14">Продать дом</option>
	<option value="11">Снять квартру</option>
	<option value="1">Снять дом</option>
	<option value="15">Продать землю</option>
	<option value="16">Арендовать землю</option>
</select>


Решения вопроса 1



@0xD34F Куратор тега JavaScript

const first = document.querySelector('#first');
const second = document.querySelector('#second');

const showOptions = {
  1: [ '1', '11', '16' ],
  2: [ '12', '14', '15' ],
};

first.addEventListener('change', function() {
  const toShow = showOptions[this.value];
  [...second.options].forEach(n => n.hidden = +n.value && toShow && !toShow.includes(n.value));
});



1

комментарий


Ответы на вопрос 0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *