Jquery dropdown not loading content selectively
<p>I found the following code in another thread here to create a Jquery dropdown menu:</p>

<pre><code>$(document).ready(function() {
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});
</code></pre>

<p>HTML would look like this</p>

<pre><code>&lt;select id="myselector"&gt;
   &lt;option value="state1"&gt;State 1&lt;/option&gt;
   &lt;option value="state2"&gt;State 2 &lt;/option&gt;
   &lt;option value="state3"&gt;State 3&lt;/option&gt;
&lt;/select&gt;

&lt;div id="state1" class="statecontent"&gt;State1 Specific Page Content Goes here&lt;/div&gt;
&lt;div id="state2" class="statecontent"&gt;State2 Specific Page Content Goes here&lt;/div&gt;
&lt;div id="state3" class="statecontent"&gt;State3 Specific Page Content Goes here&lt;/div&gt;
</code></pre>

<p>This works just fine except for one problem: when the page loads, it displays the text for all three options. However, once an option has been selected, the other text goes away and only the relevant text appears. Why is the text for all three options loading? How can I fix it so that only the text for the first options is shown until the user selects another option? Thanks in advance for the help. </p>
