使用多个选择和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更改图像

回答

相关问题