Reputation: 265
I need to change the image on my website using 2 select
for colour and size.
e.g. If I choose the option
"Red" under the colour select
, and then I choose the option
"Small" under the size select
, the image should be "small_red.png".
Similarly, if I choose red and large, then the image should be "red_large.png"
Thus far, I only know how to do it for 1 select
, but not multiple select
.
Here's my 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>
Here's my javascript:
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var change = document.getElementById("colour");
image.src = change.value;
};
</script>
Upvotes: 0
Views: 2917
Reputation: 1526
<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 code:
<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>
Upvotes: 0
Reputation: 54659
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);
with:
<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>
demo: http://jsbin.com/iwezad/2/
though, using jQuery this could be shortend a lot, and you'd get rid of some browser quirks regarding addEventListener
.
jQuery version:
$('#colour, #size').on('change', function() {
$('#imageToSwap').prop('src',
['img/', $('#size').val(), '_', $('#colour').val(), '.jpg'].join('')
);
});
Upvotes: 1
Reputation: 36000
You can always concatenate values from selects.
<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>
And in script:
<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>
Upvotes: 1