Изменение изображения с помощью выпадающего меню

Question

Изменение изображения с помощью выпадающего меню

0

Я пытаюсь изменить изображение в зависимости от того, какой параметр выбран в раскрывающемся меню. Я очень новичок в 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>

Если бы кто-нибудь мог мне помочь, я бы очень признателен! Благодарю.

AHalbert 04 апр. 2014, в 12:14

Источник

Теги:

javascript

html

3 ответа

1

Попробуй это

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

DEMO

Sridhar R 04 апр. 2014, в 07:49

0

Ах, это опечатка. Спасибо, что поймали это. Это все еще не работает. Мой JS в голове, это имеет значение?
AHalbert 04 апр. 2014, в 09:35

1

Самый простой способ:

<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>

Tuhin 04 апр. 2014, в 07:06

0

jsfiddle.net/NNvTg
Tuhin 04 апр. 2014, в 09:39

Ещё вопросы

Ах, это опечатка. Спасибо, что поймали это. Это все еще не работает. Мой JS в голове, это имеет значение?

Dhaval Marthak · Accepted Answer · 2014-04-04T07-36-00.000Z

У вас coffeedropdown переменной 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

скрипка

Спасибо! Это исправило это, в дополнение к изменению selectedValue на значение. К сожалению.