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

i want 3+ selectors on page each showing different product images when item selected. if there 3 selectors, there 3 different divs show images.

i'm having trouble code:

<!-- selector mug --> <script type="text/javascript">      $(function(){     function changeimage(image) {     // hide mainimages               $('div.mainimage-mug > div ').hide();      // show selected image     $('div.mainimage-mug > div.' + image).show();         }   $('select.mug').change(function(){            // selected option     var selected = $('select.mug option:selected');      changeimage(selected.val());       });   }); 

thanks!

i prefer different approach. since dealing images , changing them on change of select,i prefer changing src of image rather using show hide method.it more simpler.

<select onchange="change_image(this.value)">      <option value="red">red</option>      <option value="green">green</option>      <option value="blue">blue</option> </select>  function change_image(color){ var dynamic_src=""; switch(color){  case "red":  dynamic_src="red_image.jpeg";  break; case "blue":  dynamic_src="blue_image.jpeg";  break;  case "green":  dynamic_src="green_image.jpeg";  break; }  $('#image_to_be_replaced').attr('src',dynamic_src); }