时间戳

首页 > 解决方案 > 在下拉菜单中选择项目时如何显示内容？

javascript - 在下拉菜单中选择项目时如何显示内容？

问题描述

如何使它从下拉菜单中选择特定项目，显示一个包含与该块对应的信息的块？

例如，当您选择 Apple 项目时，会出现一个包含有关苹果信息的块，当您选择橙色时，会出现有关橙子的信息。

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

标签： javascript

解决方案

可以使用这样的东西。

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>

推荐阅读