为下拉菜单选中的每个纪念碑更换对应图片的技术实现请求

核心逻辑 #

监听「选择纪念碑」下拉框的change事件，根据选中选项的对应值，更新页面图片元素的src属性，实现图片自动切换。

具体实现步骤 #

1. 完善HTML结构 #

首先确保页面存在用于展示图片的元素，同时补充纪念碑选项到目标下拉框（若需关联城市选择，可额外添加城市下拉组件）：

<!-- 图片展示元素 -->
<img id="monument-img" src="" alt="纪念碑图片" style="width: 400px; height: auto;">

<!-- 城市选择下拉（可选，用于关联对应城市的纪念碑） -->
<select id="city-select">
  <option value="" selected>选择城市</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>

<!-- 纪念碑选择下拉 -->
<select class="drop" name="chapter" id="chapter" style="display: none; float: right; margin-right: 300px">
  <option value="" selected="selected">请选择纪念碑</option>
</select>

<!-- 现有按钮 -->
<button>Next</button>
<button>SUBMIT</button>

2. 编写JavaScript交互代码 #

基础版：直接监听纪念碑下拉切换图片

// 获取核心元素
const monumentSelect = document.getElementById('chapter');
const monumentImg = document.getElementById('monument-img');

// 监听下拉框选中变化
monumentSelect.addEventListener('change', function() {
  const selectedImgUrl = this.value;
  if (selectedImgUrl) {
    // 更新图片地址与描述
    monumentImg.src = selectedImgUrl;
    monumentImg.alt = this.options[this.selectedIndex].text;
  } else {
    // 选中默认选项时清空图片
    monumentImg.src = '';
    monumentImg.alt = '请选择纪念碑';
  }
});

进阶版：关联城市选择，动态加载对应纪念碑选项

// 获取元素
const citySelect = document.getElementById('city-select');
const monumentSelect = document.getElementById('chapter');
const monumentImg = document.getElementById('monument-img');

// 城市-纪念碑映射数据
const cityMonumentMap = {
  beijing: [
    { text: '故宫', value: 'forbidden-city.jpg' },
    { text: '天安门', value: 'tiananmen.jpg' }
  ],
  shanghai: [
    { text: '东方明珠', value: 'oriental-pearl.jpg' },
    { text: '外滩', value: 'bund.jpg' }
  ]
};

// 城市选择事件：动态加载纪念碑选项
citySelect.addEventListener('change', function() {
  const selectedCity = this.value;
  // 重置纪念碑下拉框
  monumentSelect.innerHTML = '<option value="" selected>请选择纪念碑</option>';
  
  if (selectedCity) {
    // 加载对应城市的纪念碑选项
    cityMonumentMap[selectedCity].forEach(item => {
      const option = document.createElement('option');
      option.textContent = item.text;
      option.value = item.value;
      monumentSelect.appendChild(option);
    });
    // 显示纪念碑下拉框
    monumentSelect.style.display = 'block';
  } else {
    // 未选城市时隐藏下拉框并清空图片
    monumentSelect.style.display = 'none';
    monumentImg.src = '';
    monumentImg.alt = '请先选择城市';
  }
});

// 纪念碑选择事件：切换图片
monumentSelect.addEventListener('change', function() {
  const selectedImgUrl = this.value;
  if (selectedImgUrl) {
    monumentImg.src = selectedImgUrl;
    monumentImg.alt = this.options[this.selectedIndex].text;
  } else {
    monumentImg.src = '';
    monumentImg.alt = '请选择纪念碑';
  }
});

3. 注意事项 #

• 确保图片路径正确，可使用相对路径或完整URL
• 若需优化用户体验，可添加图片加载占位图或加载状态提示
• 可根据实际需求调整下拉框的显示/隐藏逻辑

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