不修改下拉选框option原有value值 实现选中选项切换对应蛋糕展示图

不需要修改现有option的value属性，可通过以下两种更简洁的方案替代冗长的if else判断：

方案1：使用映射对象（无需修改HTML代码） #

提前在JS中定义蛋糕款式与对应图片地址的映射表，直接通过选中的蛋糕名称匹配对应图片地址即可，后续新增款式只需要更新映射表，无需修改逻辑代码：

// 蛋糕款式-图片地址映射表，新增款式直接在此处添加键值对即可
const cakeImageMap = {
  'Round Golf Course': 'https://pbs.twimg.com/media/E5AhG5GXwAEADwJ?format=jpg&name=small',
  'Oblong Football Pitch': '对应款式的图片地址',
  'Round Chocolate Sweetie': '对应款式的图片地址',
  'Round White Chocolate Sweetie': '对应款式的图片地址',
  'Round Unicorn Cake': '对应款式的图片地址',
  'Round Drip Cake': '对应款式的图片地址',
  'Football Cake': '对应款式的图片地址',
  'Yum Yum Cake': '对应款式的图片地址',
  'Oblong Carrot Cake': '对应款式的图片地址',
  'Round AFC Cake': '对应款式的图片地址',
  'Square 8" Cake': '对应款式的图片地址',
  'Oblong Cake': '对应款式的图片地址'
}

function changeImage(){
  const imageEl = document.getElementById('cakeImages')
  const selectEl = document.getElementById('cake_type')
  const selectedCakeName = selectEl.options[selectEl.selectedIndex].text.trim()
  // 匹配到对应图片则赋值，未匹配到可设置为空/默认占位图
  imageEl.src = cakeImageMap[selectedCakeName] || ''
  // 可选：未选中有效款式时隐藏图片
  imageEl.style.display = cakeImageMap[selectedCakeName] ? 'block' : 'none'
}

方案2：使用data自定义属性（仅新增HTML属性，不修改原有value） #

如果希望图片地址和选项绑定在一起维护，可以给每个option新增data-img自定义属性存储对应图片地址，无需修改原有value值：

<!-- 仅给option新增data-img属性，原有value保持不变 -->
<option value="5|Round Golf Course" data-img="对应图片地址" >Round Golf Course</option>
<option value="10|Oblong Football Pitch" data-img="对应图片地址" >Oblong Football Pitch</option>
<!-- 其余option同理新增data-img属性即可 -->

对应的JS代码可以简化为：

function changeImage(){
  const imageEl = document.getElementById('cakeImages')
  const selectedOption = document.getElementById('cake_type').selectedOptions[0]
  imageEl.src = selectedOption.dataset.img || ''
}

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