使用 javascript 根据下拉菜单更改图像。答案

【问题标题】：Change image based on dropdown using javascript.使用 javascript 根据下拉菜单更改图像。
【发布时间】：2014-04-10 20:48:29
【问题描述】：

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

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

这就是我通过将 iljbid 替换为： http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg 但它不起作用。

【问题讨论】：

请给我们看一些代码...
您好，这用Javascript很容易做到，但是您必须放一些代码让我们帮助您...而且，顺便说一下，您将jquery作为Tag，但在示例中根本没有 jquery……它只是普通的 Javascript
你正在阅读这个技巧的网站真的很糟糕。有很多关于如何实现期望的惊人资源。猜一个。没错，StackOverflow

标签： javascript jquery css image select

【解决方案1】：

本教程希望您拥有一个具有命名约定的图像列表。那是{prefix}{number}.{extension}。例如：图片0.jpg 图像1.jpg 图像2.jpg 等等……

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

一旦你掌握了更多的 JavaScript 知识，它就可以展开。

另外，那个教程真的很糟糕（不是不尊重，但它确实缺乏。将示例本身复制并粘贴到 JSFiddle 中会到处抛出错误）。

教程是 1998 年的。那是 16 岁。我强烈建议您寻找更新的教程。 (2010+)

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

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

// 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;
}

尽管现在人们使用 jQuery 或 MooTools 等 JavaScript 库来完成类似的事情。我确实发现在进入这些库之前先在纯 JS 中探索会更好，尽管这不是必需的。这些库中的大多数都很容易掌握，但是当您想要做大事时，您可能需要具备 JS 知识。

我建议您阅读 Codecademy JavaScript 教程。

【讨论】：

【解决方案2】：

在这里试试这个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]);
});

【讨论】：

这将无法正常工作，因为当表格第一行为 0 时，您从 1 开始计数。您应该将选项值从 0 到 4 或在 val 变量上设置 -1在javascript中。

【解决方案3】：

有多种方法可以达到预期。

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

<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 one 是在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;
});

【讨论】：