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

Question

[Роберт Плант]

Как реализовать на 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>

Comments

[Buck]

Только не class="hide" делать.
А ставить тогда disabled для option

Тебе на js или jquery?

[Роберт Плант]

Buck, тут как удобнее ) Лучше на js

[Buck]

Роберт Плант, я удалил так как предложенное решение более оптимально и универсально

Answer 1

[0xD34F]

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));
});

Comments

[Роберт Плант]

Спасибо большое!

[Никола Соболев]

Спасибо огромное!

[petermsc]

Нужно тоже самое, но select внутри form, вставил указанный код, но не срабатывает. В чем может быть проблема?