如何在选择下拉列表项时更改图像

Question

我正在制作一个Html应用程序。我在我的文件夹中有多个图像。我想在我的html应用程序中调用所有图像，我想在每个项目的选择上更改图像，就像假设我有下拉列表，其中包含4个花名称，我也在使用一个图像标签。我想在每个花卉项目的选择上更改每个图像怎么可能。请帮帮我。谢谢。

Answer 1

如果您不使用jQuery，可以尝试这样的事情：

<select onchange="document.getElementById('preview').src = this.value">
    <option value="f1.jpeg">Flower 1</option>
    <option value="f2.png">Flower 2</option>
    <option value="f3.jpg">Flower 3</option>
    <option value="f4.gif">Flower 4</option>
</select>

<img id="preview">

Answer 2

如果你有“myitem”类的项目，那么这些项目由“id”标签枚举，所选项目有一个“选定”的附加类，你的图像有“myImage”类，你可以用javascript和jquery做到这一点：

$('.myitem').each( function () {
  if ($(this).hasClass('selected'))
  {
     $('.myImage').attr('src') = 'path-to-images/image'+$(this).attr('id')+'.jpg';
  }
});