title: Jquery script which shows/hides content based on form select value
body: <p>I am trying to implement a jquery script that I found which enables content to be displayed/hidden dependent on the select value of a dropdown field in a form.</p>
  
  <p>It works to an extend but what I need it to do is to hide all the content when the page is loaded and only display the relevant content dependent on the select value.  At the moment it is showing all the content when the page is loaded and then works fine to show/hide content as expected when I select a value.</p>
  
  <p>How can I hide all content in the first instance?</p>
  
  <p><strong>Here's what I have so far by way of a test:</strong></p>
  
  <pre><code>&lt;select id="viewSelector"&gt;
  &lt;option value="0"&gt;-- Select a View --&lt;/option&gt;       
  &lt;option value="view1"&gt;view1&lt;/option&gt;
  &lt;option value="view2"&gt;view2&lt;/option&gt;
  &lt;option value="view3"&gt;view3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="view1"&gt;
  &lt;p&gt;a&lt;/p&gt; 
  &lt;/div&gt;
  &lt;div id="view2a"&gt;
  &lt;p&gt;b&lt;/p&gt; 
  &lt;/div&gt;
  &lt;div id="view2b"&gt;
  &lt;p&gt;c&lt;/p&gt; 
  &lt;/div&gt;
  &lt;div id="view3"&gt;
  &lt;p&gt;d&lt;/p&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And the jQuery is:</strong></p>
  
  <pre><code>$(document).ready(function() {
  $.viewMap = {
      '0' : $([]),
      'view1' : $('#view1'),
      'view2' : $('#view2a, #view2b'),
      'view3' : $('#view3')
    };
  
    $('#viewSelector').change(function() {
      // hide all
      $.each($.viewMap, function() { this.hide(); });
      // show current
      $.viewMap[$(this).val()].show();
    });
  });
  </code></pre>
  
  <p>Here is link to the test page so you can see what I mean:</p>
  
  <p><a href="http://sitesforasnip.com/form/testform.html" rel="nofollow">http://sitesforasnip.com/form/testform.html</a> </p>
  
  <p>Many thanks</p>