使用下拉菜單更改圖像

我試圖根據在下拉菜單中選擇的選項更改圖像。我對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>

如果有人可以幫助我這個問題，我將不勝感激！謝謝。

來源

2014-04-04 AHalbert

你不是已經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

來源

2014-04-04 09:34:08

謝謝！這固定它，除了將selectedValue更改爲值。哎呀。 – AHalbert

試試這個

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

DEMO

來源

2014-04-04 09:34:00

啊，那是一個錯字。感謝您的支持。它仍然不起作用。我的JS在頭上，這很重要嗎？ – AHalbert

簡單的方法:)

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

來源

2014-04-04 09:37:05 Tuhin

http://jsfiddle.net/NNvTg/ – Tuhin

使用下拉菜單更改圖像

回答

相關問題