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现在将是{ {1}}。

img

应该是

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

Fiddle

Answer 2

试试这个

function setPicture() {
    var img = document.getElementById("coffeedropdown");
    var value = img.options[coffeedropdown.selectedIndex].value;
    alert(value);
}

DEMO

Answer 3

最简单的方法：）

<select id="coffeedropdown" onchange="setPicture(this);">
            <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>
    <script type="text/javascript">

        function setPicture(select) {
            selectedvalue=select.value;
            alert(selectedvalue);
        }
    </script>

使用下拉菜单更改图像

3 个答案: