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

问题描述

我是 javascript 初学者，我想根据下拉列表中的选项更改图像(选择)我找到了这个教程，但我遇到了一些问题.

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/巨石阵.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屋！