title: Dropdown menu (select) -- selecting an item and picture shows based on the selection
body: <p>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.</p>
  
  <p>I'm having trouble with the code:</p>
  
  <pre><code>&lt;!-- Selector for Mug --&gt;
  &lt;script type="text/javascript"&gt;     
  $(function(){
      function changeImage(image)
  {
      // hide all mainimages          
      $('div.mainimage-mug &gt; div ').hide();
  
      // show the selected image
      $('div.mainimage-mug &gt; div.' + image).show();        
  }
  
  
  $('select.mug').change(function(){       
      // get the selected option
      var selected = $('select.mug option:selected');
  
      changeImage(selected.val());   
     });
  
  
  });
  </code></pre>
  
  <p>Thanks!</p>