使用Javascript更改选择字段中的图像

Change images from a select field using Javascript

本文关键字：图像 字段 选择 Javascript 使用      更新时间：2023-09-26

所以我试图根据用户从下拉菜单中选择的选项来更改图像。我现在的图像是"青色.png"、"品红色.png"，"黄色.png"answers"黑色.png"。

我的HTML

<select name="color" multiple>
<option>Cyan</option>
<option>Magenta</option>
<option>Yellow</option>
<option>Black</option>
<option>Fuschia</option>
</select>

我的JavaScript

// This part tries to load all images onto the carArray variable
var nameArray = new Array("cyan.png", "magenta.png", "yellow.png", "black.png", "fuschia.png");
var carArray = new Array;
for(var i = 0; i < carArray.length; i++) {
    carArray[i] = new Image;
    carArray[i].src = nameArray[i];
}
// This part tries (and fails) to change the image when the user selects a color from a dropdown menu
window.onload = function() {
    var colorPicker = document.getElementsByName("color").selectedIndex;
    var options = document.getElementsByName("color").options;
    document.getElementById("photo").src = carArray[options[colorPicker];
}

你能帮我了解问题是什么，以及如何解决吗？

如果在window.onload上绑定函数，它将只在加载窗口时激发一次。您可能希望将其绑定到select onchange事件上。

例如：

function pickColor() {
    var colorPicker = document.getElementsByName("color").selectedIndex;
    var options = document.getElementsByName("color").options;
    document.getElementById("photo").src = carArray[options[colorPicker]];
}
<select name="color" onchange="pickColor()" multiple>
...

正如@LightStyle所建议的，您应该避免内联事件分配。我不知道你的DOM，所以为了简单起见，我会在你的选择中添加一个id（它在页面中必须是唯一的）。然后您可以执行以下操作：

document.getElementById('color').onchange = function() {
    var colorPicker = document.getElementsByName("color").selectedIndex;
    var options = document.getElementsByName("color").options;
    document.getElementById("photo").src = carArray[options[colorPicker]];
}
<select name="color" id="color" multiple>
相关文章：