javascript - 使用下拉菜单更改图像

Question

我正在尝试根据下拉菜单中选择的选项来更改图像。我对 javascript 很陌生，所以我确信这是一个我没有注意到的小问题。我的实现尝试如下:

JS:

<script type="text/javascript">             
    function setPicture() {
        var img = document.getElementById("coffeedropdown");
        var value = coffeedropdown.options[coffeedropdown.selectedIndex].value;
        alert(selectedValue);
    }
</script>

HTML:

<select id="coffeedropdown" onchange="setPicture();">
    <option value="../Images/pimms.jpg">Select a Drink</option>
    <option value="../Images/caffe.jpg">Caffe</option>
    <option value="../Images/caffelatte.jpg">Caffe Latte</option>
    <option value="../Images/cappuccino.jpg">Cappuccino</option>
    <option value="../Images/marocchino.jpg">Caffee Marrocchino</option>
    <option value="../Images/americano.jpg">Caffe Americano</option>
    <option value="../Images/shakerato.jpg">Caffe Shakerato</option>
    <option value="../Images/corretto.jpg">Caffe Corretto</option>
</select>

如果有人能帮我解决这个问题，我将非常感激!谢谢。

Answer 1

您没有在任何地方声明或初始化 coffeedropdown 变量，因此在使用下拉列表初始化 img 变量后，您需要使用 img此外，您的 coffedropdown 现在将是 img。

var img = document.getElementById("coffeedropdown");
var value = coffeedropdown.options[coffeedropdown.selectedIndex].value;

应该是

var img = document.getElementById("coffeedropdown");
var value = img.options[img.selectedIndex].value;
            ^^^         ^^^ //img here not coffeedropdown

Fiddle