求助：为下拉菜单选择功能添加占位图片的实现方法

问题分析 #

你的代码存在两个关键问题导致图片切换失效：

1. 多个<option>标签的value属性后有多余的引号，浏览器无法正确解析图片路径；
2. 初始的<img>标签没有设置src属性，占位图无法显示，且第一个选项为disabled状态，没有有效路径值。

修复方案 #

1. 修正HTML语法错误

移除所有<option>标签中value属性后多余的引号，确保路径格式正确。

2. 添加占位图片

给<img>标签设置初始src属性，指定你的占位图路径。

3. 可选：设置默认选中的图片

如果希望页面加载时默认显示某张图片（比如第一个可选选项的图片），可以将对应<option>设为selected，并同步设置<img>的初始src。

修正后的完整代码 #

CSS

select { 
  outline: none; 
  width: 100%; 
  padding: 10px 0; 
  text-align: center;
}

HTML（带占位图版本）

<select onchange="document.getElementById('preview2').src = this.value">
  <option selected disabled>Select a finish</option>
  <option value="/images/image1.jpeg">Chrome</option>
  <option value="/images/image2.jpeg">Satin Chrome</option>
  <option value="/images/image3.jpeg">Black</option>
  <option value="/images/image5.jpeg">Brushed Brass</option>
  <option value="/images/image6.jpeg">Brushed Nickel</option>
  <option value="/images/image7.jpeg">Powdercoated Gun Metal</option>
  <option value="/images/image8.jpeg">Gun Metal</option>
  <option value="/images/image9.jpeg">Antique Brass</option>
  <option value="/images/image10.jpeg">Black Chrome</option>
</select><br />
<p><img id="preview2" src="/images/placeholder.jpeg" alt="Product preview" /></p>

HTML（默认显示第一张可选图片版本）

<select onchange="document.getElementById('preview2').src = this.value">
  <option disabled>Select a finish</option>
  <option value="/images/image1.jpeg" selected>Chrome</option>
  <option value="/images/image2.jpeg">Satin Chrome</option>
  <option value="/images/image3.jpeg">Black</option>
  <option value="/images/image5.jpeg">Brushed Brass</option>
  <option value="/images/image6.jpeg">Brushed Nickel</option>
  <option value="/images/image7.jpeg">Powdercoated Gun Metal</option>
  <option value="/images/image8.jpeg">Gun Metal</option>
  <option value="/images/image9.jpeg">Antique Brass</option>
  <option value="/images/image10.jpeg">Black Chrome</option>
</select><br />
<p><img id="preview2" src="/images/image1.jpeg" alt="Product preview" /></p>

说明 #

• 修正引号后，onchange事件能正确获取选项的图片路径并替换img的src；
• 占位图路径请替换为你实际的图片地址；
• 两种HTML版本可根据需求选择，前者初始显示占位图，后者初始显示第一个可选选项的图片。

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