如何实现下拉菜单选中项对应信息区块的联动显示？

没问题！要实现这个下拉选单切换对应内容的功能，我们可以通过CSS默认隐藏+JavaScript监听切换的方式来完成，下面是完整的实现方案：

完整代码示例 #

<select id="fruitSelector">
  <option value="apple">Яблоко</option>
  <option value="orange">Апельсин</option>
</select>

<div class="fruits">
  <div class="fruit-info 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="fruit-info orange-info">
    <h1>Апельсин</h1>
    <img src="https://befreshcorp.net/wp-content/uploads/2017/07/product-packshot-Orange.jpg" alt="Апельсин в упаковке">
  </div>
</div>

<style>
/* 默认隐藏所有水果信息区块 */
.fruit-info {
  display: none;
  margin-top: 1rem;
}
/* 标记需要显示的区块 */
.fruit-info.active {
  display: block;
}
</style>

<script>
// 获取核心元素
const fruitSelector = document.getElementById('fruitSelector');
const fruitInfos = document.querySelectorAll('.fruit-info');

// 初始化：默认显示第一个选项的内容
document.querySelector(`.${fruitSelector.value}-info`).classList.add('active');

// 监听下拉选单的切换事件
fruitSelector.addEventListener('change', function() {
  // 先隐藏所有区块
  fruitInfos.forEach(info => info.classList.remove('active'));
  // 显示当前选中值对应的区块
  document.querySelector(`.${this.value}-info`).classList.add('active');
});
</script>

代码拆解说明 #

• HTML优化：给下拉菜单加了id方便JS获取，同时给所有信息区块统一加了fruit-info类，批量控制更高效；
• CSS部分：
  • 用display: none默认隐藏所有内容区块；
  • 定义.active类，用来标记需要显示的区块，通过添加/移除这个类来控制显示状态；
• JavaScript部分：
  • 初始化时自动显示第一个选项的内容，避免页面加载后空白；
  • 监听下拉选单的change事件，每次切换时先隐藏所有区块，再显示当前选中值对应的内容，逻辑清晰且扩展性强。

扩展小技巧 #

• 如果后续要加更多水果，只需要新增<option>和对应{水果名}-info类的区块即可，JS代码完全不用改；
• 想要平滑切换效果的话，可以把CSS里的display: none换成opacity: 0; height: 0; overflow: hidden; transition: all 0.3s ease;，.active类设置opacity: 1; height: auto;，就能实现淡入淡出的过渡动画。

内容的提问来源于stack exchange，提问作者Tempest