使用多個選擇和javascript更改圖像

我需要更改我的網站上的圖像，使用顏色和大小2 select。使用多個選擇和javascript更改圖像

例如如果我在顏色select下選擇option「紅色」，然後選擇尺寸爲select下的「小」option，則圖像應爲「small_red.png」。同樣，如果我選擇紅色，大，然後將圖像應該是「red_large.png」

到目前爲止，我只知道怎麼做了1 select，但不能多select。

這裏是我的html：

<img id="imageToSwap" src="img/red.png"> 

<select id="colour" onChange="swapImage()"> 
<option value="img/red.png">Red</option> 
<option value="img/green.png">Green</option> 
</select>

這裏是我的javascript：

<script type="text/javascript"> 
function swapImage(){ 
    var image = document.getElementById("imageToSwap"); 
    var change = document.getElementById("colour"); 
    image.src = change.value; 
}; 
</script>

來源

2012-12-28 Elijah Yang

什麼問題呢？ –

@AspiringAqib *到目前爲止，我只知道如何做1選擇，但不是多選擇。*那裏。 – Yoshi

var 
    img = document.getElementById('imageToSwap'), 
    colour = document.getElementById('colour'), 
    size = document.getElementById('size'), 
    change; 

change = function (evt) { 
    img.src = ['img/', size.value, '_', colour.value, '.png'].join(''); 
}; 

colour.addEventListener('change', change, false); 
size.addEventListener('change', change, false);

有：

<img id="imageToSwap"> 

<select id="colour"> 
    <option value="red">Red</option> 
    <option value="green">Green</option> 
</select> 

<select id="size"> 
    <option value="small">Small</option> 
    <option value="big">Big</option> 
</select>

演示：http://jsbin.com/iwezad/2/

雖然，使用jQuery這可能會縮短很多，你會擺脫一些關於addEventListener瀏覽器的怪癖。

jQuery的版本：

$('#colour, #size').on('change', function() { 
    $('#imageToSwap').prop('src', 
    ['img/', $('#size').val(), '_', $('#colour').val(), '.jpg'].join('')  
); 
});

來源

2012-12-28 13:04:54 Yoshi

爲什麼改變他的工作代碼？ – ATOzTOA

@ATOzTOA [Unobtrusive JavaScript]（http://en.wikipedia.org/wiki/Unobtrusive_JavaScript） – Yoshi

這不起作用，您正在使用'顏色'和'顏色'。 – ATOzTOA

您可以隨時選擇串聯值。

<img id="imageToSwap" src="img/red.png"> 

<select id="colour" onChange="swapImage()"> 
    <option value="red.png">Red</option> 
    <option value="green.png">Green</option> 
</select> 

<select id="size" onChange="swapImage()"> 
    <option value="small">Small</option> 
    <option value="large">Large</option> 
</select>

而且在腳本：

<script type="text/javascript"> 
    function swapImage(){ 
     var image = document.getElementById("imageToSwap"); 
     var color = document.getElementById("colour").value; 
     var size = document.getElementById("size").value; 

     image.src = "img/" + size + "_" + color; 
    }; 
</script>

來源

2012-12-28 13:04:46 ATOzTOA

短而甜。非常感謝。 –

<img id="imageToSwap" > 
<select id="colour" onchange="swapImage()"> 
<option value="red">Red</option> 
<option value="green">Green</option> 
</select> 

<select id="size" onchange="swapImage()"> 
<option value="small">Small</option>` 
<option value="large">Large</option> 
</select>

Javascript代碼：

<script type="text/javascript" language="javascript"> 
    function swapImage() { 
     var image = document.getElementById("imageToSwap"); 
     var color = document.getElementById("colour").value; 
     var size = document.getElementById("size").value; 
     var imagename = size + '_' + color + '.png'; 

     image.src = "img/" + imagename; 
    } 
</script>

來源

2012-12-28 13:18:09 Prashant16

使用多個選擇和javascript更改圖像

回答

相關問題