使用javascript根据下拉列表更改图像。

我是javascript的初学者，我想根据我的下拉列表中的选项更改图像（选择）我找到了本教程 ，但我遇到了一些问题。

在本教程中，如果您想使用代码，他们会将iljbild替换为您要使用的图片文件的名称，因为图片文件的名称必须与示例中的名称相同，即唯一告诉文件分开的事情应该是一个数字，例如pict0.gif，pict2.gif等。如果你使用jpg图像，你将不得不用jpg替换gif。 设置图像的宽度和高度如果更改选择列表中的（长度）单词，则还需要更改charAt后面的数字（此处为8）

这就是我通过以下方式替换iljbid所做的： http ： //upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg但它不起作用。

Answer 1

在这里尝试这个FIDDLE

  Picute 1 Picute 2 Picute 3 Picute 4 Picute 5  

---

 var pictureList = [ "http://sofzh.miximages.com/javascript/.jpg", "http://lorempixel.com/400/200/sports/2", "http://lorempixel.com/400/200/sports/3", "http://lorempixel.com/400/200/sports/4", "http://lorempixel.com/400/200/sports/5", ]; $('#picDD').change(function () { var val = parseInt($('#picDD').val()); $('img').attr("src",pictureList[val]); }); 

Answer 2

本教程希望您拥有一个具有命名约定的图像列表。 这是{prefix} {number}。{extension}。 例如：image0.jpg image1.jpg image2.jpg等等……

所有图像上的前缀必须相同，并且所有图像上的扩展名必须相同。 这是一个完成效果的简单教程。

一旦您拥有更多JavaScript知识，它就可以扩展。

此外，该教程非常糟糕（并不意味着不尊重，但它确实缺乏。将示例本身复制并粘贴到JSFiddle中会引发各处的错误）。

该教程是从1998年开始的。那是16岁。 我强烈建议您寻找更新的教程。 （2010+）

以下是该教程的示例副本： http ： //jsfiddle.net/VmWD9/

HTML

  
  Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Image 7   

JavaScript的

 // This is the code to preload the images var imageList = Array(); for (var i = 1; i <= 7; i++) { imageList[i] = new Image(70, 70); imageList[i].src = "http://www.flowsim.se/picts/selec0" + i + ".jpg"; } function switchImage() { var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value; document.myImage.src = imageList[selectedImage].src; } 

虽然现在人们使用JavaScript库（如jQuery或MooTools）来完成这样的事情。 我确实发现在进入这些库之前首先在纯JS中进行探索是更好的，尽管这不是必需的。 这些库中的大多数都很容易掌握，但是当你想要制作一些大的东西时，你可能需要拥有先前的JS知识。

我建议您阅读Codecademy JavaScript教程。

Answer 3

有多种方法可以实现所需。

这个是通过在select change事件之后获取Number value并从imagesArray Array键中获取该src 。

  image 0 image 1 image 2   

 var imagesArray = [ "http://sofzh.miximages.com/javascript/cf5.png", // represents val 0, "//placehold.it/50x50/f1f", // 1, "//placehold.it/50x50/444" // 2 ... ]; $('#changeImage').change(function(){ $('#image')[0].src = imagesArray[this.value]; }); 

另一个是在option文本中包含图像名称：

  https://stackoverflow.com/questions/22254608/change-image-based-on-dropdown-using-javascript/image.jpg something.png nature.jpg   

 $('#changeImage').change(function(){ $('#image')[0].src = this.value; });