@Norum

Как вывести содержимое при выборе пункта в выпадающем меню?

Как сделать так, чтобы при выборе определенного пункта из выпадающего меню, отображался блок с информацией, которая соответствует этому блоку?

Например, при выборе пункта Яблоко, появляется блок с информацией о яблоке, а при выборе Апельсина появляется инфа про апельсин.
<select>
	<option value="apple">Яблоко</option>
	<option value="orange">Апельсин</option>
</select>

<div class="fruits">
	div class="apple-info">
	<h1>Яблоко</h1>
	<img src="https://static9.depositphotos.com/1011549/1208/i/950/depositphotos_12089121-stock-photo-green-apple-with-leaf.jpg" alt="">
	</div>

  <div class="orange-info">
	<h1>Апельсин</h1>
	<img src="https://befreshcorp.net/wp-content/uploads/2017/07/product-packshot-Orange.jpg" alt="">
  </div>
</div>
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
.fruits > div {
  display: none;
}

.fruits > div.visible {
  display: block;
}

document.querySelector('select').addEventListener('change', e => {
  const className = `${e.target.value}-info`;
  document.querySelectorAll('.fruits > div').forEach(n => {
    n.classList.toggle('visible', n.classList.contains(className));
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы