Как поместить выбранное изображение в Div по изменению значения option класса Select?

Question

<form class="form_calc_delivery" action="script.jsx">
  <p>
    Калькулятор Грузоперевозок
  </p>
  <div id="change_img_car">
  </div>
  <select class="list_car">
    <option class="optGazel">Gazel NEXT</option>
    <option class="optMercedes">Mercedes Sprinter</option>
    <option class="optFord">Ford Transit</option>
  </select>
</form>

Answer 1

Описание работы кода в комментариях к нему.

let selCar = document.querySelector('.list_car'), // Берём селектор
    viewCar = document.querySelector('#change_img_car'); // и берём блок в котором находятся картинки авто

// Проверяем какой option выбран, изначально будет первый, его и отобразим
viewCar.querySelector(`[alt="${selCar.value}"]`).classList.add('--show');

// Вешаем обработчик на изменение `option`
selCar.addEventListener('change', function(e){
  viewCar.querySelector('.--show').classList.remove('--show'); // Удаляем класс с выбранной ранее картинки
  viewCar.querySelector(`[alt="${e.target.value}"]`).classList.add('--show'); // И вешаем новый, который есть у выбранного option
});

#change_img_car {
  display: block;
  width: 200px;
  height: 150px;
}

/* Весь "фокус" завязан на том, что изначально все картинки скрыты и отобразятся только когда у них будет класс --show */

#change_img_car img {
  display: none;
  background: #fff;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

#change_img_car img.--show {
  display: block;
}

<p>Калькулятор Грузоперевозок</p>
<!--
  alt картинок должен совпадать с value в селекторе, чтобы картинки выводились нужные.
-->
<div id="change_img_car">
  <img src="//i.imgur.com/8616zk3.png" alt="Gazel NEXT">
  <img src="//i.imgur.com/8GbFMHo.png" alt="Mercedes Sprinter">
  <img src="//i.imgur.com/QJUCByF.png" alt="Ford Transit">
</div>
<select class="list_car">
  <option value="Gazel NEXT">Gazel NEXT</option>
  <option value="Mercedes Sprinter">Mercedes Sprinter</option>
  <option value="Ford Transit">Ford Transit</option>
</select>

БЛОГ НА HUSL

Как поместить выбранное изображение в Div по изменению значения option класса Select?

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