使用javascript根据下拉列表更改图像。 [英] Change image based on dropdown using javascript.

问题描述

我是javascript的初学者，我想根据下拉菜单中的选项更改图片（选择）
我发现这个 tutorial ，但我遇到了一些问题。

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.

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

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)

这是我替换iljbid所做的：
http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg
但它不工作。

it's what i did by replacing iljbid by: http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg but it doesn't work.

推荐答案

这里尝试 FIDDLE

Here try this 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]);
});

这篇关于使用javascript根据下拉列表更改图像。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！