Wednesday, 7 August 2013

Dropdown menu (select) -- selecting an item and picture shows based on the selection

Dropdown menu (select) -- selecting an item and picture shows based on the
selection

I'm trying to create a drop down menu and when you select an item, an
image will appear below.
I have solved that... by modifying this code = http://jsfiddle.net/vrUdd/
but I want 3+ selectors on the page each showing different product images
when an item is selected. If there are 3 selectors, there will be 3
different divs to show the images.
I'm having trouble with the code:
<!-- Selector for Mug -->
<script type="text/javascript">
$(function(){
function changeImage(image)
{
// hide all mainimages
$('div.mainimage-mug > div ').hide();
// show the selected image
$('div.mainimage-mug > div.' + image).show();
}
$('select.mug').change(function(){
// get the selected option
var selected = $('select.mug option:selected');
changeImage(selected.val());
});
});
Thanks!

No comments:

Post a Comment