使用 javascript 根据下拉列表更改图像。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22254608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change image based on dropdown using javascript.
提问by user3393314
I am a beginer in javascript and I want to change an image based upon options in my dropdown (select) I find this tutorial, but I am having some problems.
我是 javascript 初学者，我想根据下拉菜单（选择）中的选项更改图像，我找到了本教程，但遇到了一些问题。
In this tutorial they replace iljbild by the name of the picture files you are going to use if you want to use the code as it is the names of the picture files have got to be of the same type as in the example, ie the only thing telling the files apart should be a number, e g pict0.gif, pict2.gif etc. if you are using jpg images you will have to replace gif by jpg. set the WIDTH and the HEIGHT of the images if you change the (length of the) words in the selection list you will also have to change the number after charAt (here it is 8)
在本教程中，如果您想使用代码，他们将 iljbild 替换为您将要使用的图片文件的名称，因为图片文件的名称必须与示例中的类型相同，即唯一的将文件分开的东西应该是一个数字，例如 pict0.gif、pict2.gif 等。如果您使用 jpg 图像，则必须将 gif 替换为 jpg。如果更改选择列表中的单词（长度），则设置图像的宽度和高度，您还必须更改 charAt 之后的数字（这里是 8）
it's what i did by replacing iljbid by: http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpgbut it doesn't work.
这是我通过将 iljbid 替换为：http: //upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg但它不起作用。
采纳答案by Lokesh Suthar
Here try this FIDDLE
在这里试试这个FIDDLE
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picute 1</option>
<option value="2">Picute 2</option>
<option value="3">Picute 3</option>
<option value="4">Picute 4</option>
<option value="5">Picute 5</option>
</select>
var pictureList = [
"http://lorempixel.com/400/200/sports/1",
"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]);
});
回答by SparoHawk
The tutorial expect you to have a list of images with a named convention. That is {prefix}{number}.{extension}. For exmaple: image0.jpg image1.jpg image2.jpg and so on...
本教程希望您拥有一个带有命名约定的图像列表。那是 {prefix}{number}.{extension}。例如：image0.jpg image1.jpg image2.jpg 等等...
The prefix on all images must be the same, and the extension on all images must be the same. This is a simple tutorial to get the effect done.
所有图片的前缀必须相同，所有图片的扩展名必须相同。这是一个简单的教程来完成效果。
It can be expanded once you have more JavaScript knowledge.
一旦您拥有更多的 JavaScript 知识，就可以扩展它。
Also, that tutorial is really bad (don't mean to disrespect, but it is really lacking. Copying and pasting the example itself into JSFiddle throws errors everywhere).
另外，那个教程真的很糟糕（并不是不尊重，但它确实缺乏。将示例本身复制并粘贴到 JSFiddle 中会在各处引发错误）。
The tutorial is from 1998. That is 16 years old. I strongly suggest you to look for newer tutorials. (2010+)
教程是1998年的，也就是16岁。我强烈建议您寻找更新的教程。(2010+)
Here is an example replica of the tutorial that works: http://jsfiddle.net/VmWD9/
这是本教程的示例副本：http: //jsfiddle.net/VmWD9/
HTML
HTML
<img src="http://www.flowsim.se/picts/selec01.jpg" width="70" height="70" name="myImage" />
<form method="" action="" name="myForm">
<select size="8" name="switch" onchange="switchImage();">
<option value="1">Image 1</option>
<option value="2">Image 2</option>
<option value="3">Image 3</option>
<option value="4">Image 4</option>
<option value="5">Image 5</option>
<option value="6">Image 6</option>
<option value="7">Image 7</option>
</select>
</form>
JavaScript
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;
}
Though nowadays people use JavaScript libraries such as jQuery or MooTools to acomplish things like that. I do find that it is better to first explore things in pure JS before heading into these libraries, though it is not a necessity. Most of these libraries are easy to grasp, but when you want to make something big you might need to have prior JS knowledge.
虽然现在人们使用 jQuery 或 MooTools 等 JavaScript 库来完成这样的事情。我确实发现在进入这些库之前首先探索纯 JS 中的东西会更好，尽管这不是必需的。这些库中的大多数都很容易掌握，但是当你想要做一些大的事情时，你可能需要有先验的 JS 知识。
I recommend that you go through the CodecademyJavaScript tutorial.
我建议您阅读CodecademyJavaScript 教程。
回答by Roko C. Buljan
There are multiple ways to achieve the desired.
有多种方法可以实现所需。
This oneis by getting the Number valueafter the select changeevent and get that srcout of the imagesArrayArray key.
这是通过value在 selectchange事件之后获取 Number并将其src从imagesArrayArray 键中取出。
<select id="changeImage">
<option value="0">image 0</option>
<option value="1">image 1</option>
<option value="2">image 2</option>
</select>
<img id="image" src='//placehold.it/50x50/cf5'>
var imagesArray = [
"//placehold.it/50x50/cf5", // represents val 0,
"//placehold.it/50x50/f1f", // 1,
"//placehold.it/50x50/444" // 2 ...
];
$('#changeImage').change(function(){
$('#image')[0].src = imagesArray[this.value];
});
The other oneis to have image names inside the optiontext:
另一种是在option文本中包含图像名称：
<select id="changeImage">
<option>image.jpg</option>
<option>something.png</option>
<option>nature.jpg</option>
</select>
<img id="image" src='image.jpg'>
$('#changeImage').change(function(){
$('#image')[0].src = this.value;
});
