0

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

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

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

1
  • Что именно у вас не получается сделать?
    – Lukas
    29 ноя 2020 в 0:14

1 ответ 1

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>

6
  • Можете объяснить код, а то начиная с const values = [...options].map(option => option.value); я ничего не понимаю и не понимаю почему [...options] начинается с троеточия
    – Tempest
    29 ноя 2020 в 19:21
  • в options хранится указатель на коллекцию элементов <option>. Конструкция [...options] преобразовывает коллекцию в массив, где будет доступен метод .map(). Метод .map() перебирает элементы массива, по каждому элементу выполняет функцию, переданную в качестве параметра, функция возвращает другой элемент (а именно строку, находящейся по свойству .value), список этих возвращаемых строк формируется в .map() и возвращается ей в массив values.
    – DiD
    29 ноя 2020 в 19:50
  • @Tempest то есть был массив [<option>,<option>,<option>], после map() стал ['none','apple','orange'].
    – DiD
    29 ноя 2020 в 19:53
  • а что значит строчка const item of values?
    – Tempest
    29 ноя 2020 в 19:57
  • Дальше мы перебираем этот массив и каждый элемент: сначала 'none', потом 'apple', и 'orange', мы пытаемся удалить из списка классов элемента <div class="fruits">. Если у элемента нет такого класса, то ничего не удаляется, если есть, удаляется. Потом, после цикла мы добавляем этому <div> один из классов, читая свойство .value у элемента <select>.
    – DiD
    29 ноя 2020 в 19:58

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.