如何用JavaScript实现级联下拉联动显示匹配的鸽子图片

你当前的实现把图片切换逻辑硬编码在每个<option>的内联onclick事件里，逻辑完全分散，既无法跨下拉框读取其他选择器的当前选中值，还会导致斑纹选项重复堆砌，后续扩展新属性时代码会完全不可维护。

把所有选择逻辑收拢到统一的更新函数里，用配置表管理图片路径，同时实现选项级联过滤，修复后代码如下：

<label for="breed">品种:</label>
<select name="breed" id="breed">
  <option value="homer">Homer（信鸽）</option>
  <option value="fantail">Fantail（扇尾鸽）</option>
</select>

<label for="base">基础颜色:</label>
<select name="base" id="base">
  <option value="blue">蓝色</option>
  <option value="red">红色</option>
  <option value="albino">白化</option>
</select>

<label for="markings">斑纹:</label>
<select name="markings" id="markings">
  <option value="barless">无纹（Barless）</option>
  <option value="bar">带条纹（Bar）</option>
</select>

<center>
  <!-- 后续做多图层叠加时，把单img改成3个绝对定位叠放的img即可，分别对应品种底图、颜色层、斑纹层 -->
  <img id="Pigeon" src="./birds/basem.png">
</center>

<script>
// 资源路径统一配置，后续加新品种/颜色/斑纹直接往这里加键值对即可，不用修改核心逻辑
const ASSET_CONFIG = {
  breedBase: {
    homer: './birds/basem.png',
    fantail: './birds/basef.png'
  },
  // 白化色固定显示纯白，不受斑纹选项影响
  colorMarking: {
    blue: {
      barless: './birds/barlessblue.png',
      bar: './birds/bluebar.png'
    },
    red: {
      barless: './birds/barlessred.png',
      bar: './birds/redbar.png'
    },
    albino: {
      barless: './birds/purewhite.png',
      bar: './birds/purewhite.png'
    }
  }
}

// 缓存DOM元素
const breedSelect = document.getElementById('breed')
const colorSelect = document.getElementById('base')
const markingSelect = document.getElementById('markings')
const pigeonImg = document.getElementById('Pigeon')

// 统一更新鸽子显示的函数，每次选项变化时重新读取所有选中值做匹配
function updatePigeonDisplay() {
  const currentBreed = breedSelect.value
  const currentColor = colorSelect.value
  const currentMarking = markingSelect.value

  // 级联过滤无效选项：白化色没有条纹效果，自动禁用条纹选项
  const barOption = markingSelect.querySelector('option[value="bar"]')
  if (currentColor === 'albino') {
    barOption.disabled = true
    // 如果之前已经选了条纹，自动切回无纹
    if (currentMarking === 'bar') markingSelect.value = 'barless'
  } else {
    barOption.disabled = false
  }

  // 匹配对应图片：如果后续做多图层叠加，在这里分别给三个图层的img设置src即可
  pigeonImg.src = ASSET_CONFIG.colorMarking[currentColor][markingSelect.value]
  // 多图层模式下可放开下面两行，分别设置底图、颜色层、斑纹层路径
  // document.getElementById('breedLayer').src = ASSET_CONFIG.breedBase[currentBreed]
  // document.getElementById('markingLayer').src = `./birds/${currentMarking}_${currentColor}.png`
}

// 给所有下拉框绑定change事件，任意选项变化都触发显示更新
;[breedSelect, colorSelect, markingSelect].forEach(select => {
  select.addEventListener('change', updatePigeonDisplay)
})

// 页面加载完成后初始化一次，显示默认选项对应的鸽子
updatePigeonDisplay()
</script>

• 斑纹下拉框固定仅保留「无纹」「带条纹」2个选项，没有重复项；选中白化色时会自动禁用无效的条纹选项，符合级联过滤要求
• 所有选中值在触发更新时统一读取，无论选择顺序如何，都会按照当前最新的品种、颜色、斑纹组合匹配图片，不会出现颜色和斑纹错配的问题
• 资源路径和逻辑完全解耦，后续扩展新的品种、颜色、斑纹时，只需要在ASSET_CONFIG里添加对应路径配置即可，不需要改动事件绑定和更新逻辑
• 预留了多图层叠加的扩展入口，后续要实现底图+半透明颜色层+半透明斑纹层的真实叠加效果时，只需要调整HTML结构和更新函数里的图层赋值逻辑即可

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