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

Question

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

Например, при выборе пункта Яблоко, появляется блок с информацией о яблоке, а при выборе Апельсина появляется инфа про апельсин.

<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>

Answer 1

document.forms[0].oninput = () => {
  // ищем элемент <select>
  const select = document.querySelector('select')
  // ищем элемент <div class="fruits">
  const fruits = document.querySelector('.fruits');
  // ищем элементы <option>
  const options = select.querySelectorAll('option');
  // собираем значения
  const values = [...options].map(option => option.value);
  // Удаляем все классы из списка классов fruits
  for (const item of values) {
    fruits.classList.remove(item);
  }
  // Добавляем класс fruits равную значению value 
  //            из выбранного элемента в <select>
  fruits.classList.add(select.value);
}

.fruits .apple-info,
.fruits .orange-info {
  display: none;
}

.fruits.apple .apple-info,
.fruits.orange .orange-info {
  display: block;
}

.fruits img {
  position: fixed;
  right:0;
  top:0;
  max-width: 80vw;
  max-height: 100vh;
}

<form>
  <select value="none">
    <option value="none">Ничего</option>
    <option value="apple">Яблоко</option>
    <option value="orange">Апельсин</option>
  </select>
</form>
<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>

БЛОГ НА HUSL

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

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