0

How to make it so that to select a specific item from the drop-down menu, a block with information that corresponds to this block was displayed?

For example, when you select the Apple item, a block with information about an apple appears, when you select Orange, information about an orange appears.

<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>
Tempest
  • 13
  • 2

2 Answers2

0

Something like this could be used.

let select = document.querySelector('select');
select.addEventListener('change', (e) => {
  document.querySelectorAll('div[class*=info]').forEach(x => x.style.display = 'none'); 
  document.querySelector('.'+e.target.value+'-info').style.display = 'block';
})
.fruits div {
display: none;
}
<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>
0

You will need to attach an eventListener to the select that listens for the change event.

Here is an example snippet that iterates over the fruit-info divs and adds or removes a .hidden class based on the selected value.

// query the select and fruit-info divs from the DOM
const fruitSelect = document.getElementById('fruit-select');
const fruitsDivs = document.querySelectorAll('.fruits > div');

// declare a function to iterate over the fruit-info divs
const toggleHidden = () => {
  fruitsDivs.forEach(div => {
    // check the classList of each div against the fruitSelect.value
    if (div.classList.contains(`${fruitSelect.value}-info`)) {
      div.classList.remove('hidden');
    } else {
      div.classList.add('hidden');  
    }
  });
}

// add the event listener to the fruitSelect listening for 'change' event
fruitSelect.addEventListener('change', toggleHidden);

// call toggleHidden() function to initially show only the selected value
toggleHidden();
.hidden {
  display: none;
}

img {
  max-height: 25vh;
}
<select id="fruit-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>
pilchard
  • 12,414
  • 5
  • 11
  • 23