Show & hide content based on select value
<p>I have a this Html code</p>

<pre><code>&lt;select class="selectOption"&gt;
    &lt;option&gt;Analytics&lt;/option&gt;
    &lt;option&gt;Translation&lt;/option&gt;
    &lt;option&gt;Poll&lt;/option&gt;
&lt;/select&gt;

&lt;div id="changingArea"&gt;
    &lt;div id="Analytics" class="desc"&gt;Analytics&lt;/div&gt;
    &lt;div id="Translation" class="desc"&gt;Translation&lt;/div&gt;
    &lt;div id="Poll" class="desc"&gt;Poll&lt;/div&gt;
&lt;/div&gt;​
</code></pre>

<p>Css</p>

<pre><code>.desc {display: none;}​
</code></pre>

<p>Js</p>

<pre><code>$(function(){
      $('.selectOtion').change(function(){
        var selected = $(this).find(':selected').text();
        $(".desc").hide();
         $('#' + selected).show();
      });
});
</code></pre>

<p>The problem now it that all the div elements are hidden in page load.
I want to show the first option value by default and when changed the div content is also change.</p>

<p>Example
<a href="http://jsfiddle.net/bsqVm/" rel="nofollow">http://jsfiddle.net/bsqVm/</a></p>

<p><strong>EDIT:</strong></p>

<p>Thank you guys for your help</p>

<p>First there was a typo in my code, so 'selectOtion' should be 'selectOption'</p>

<p>Second to make the default select to show we can trigger the change event on DOMReady as 'undefined' solution</p>

<p>so the javascript is </p>

<pre><code>$(function(){
      $('.selectOption').change(function(){
        var selected = $(this).find(':selected').text();
        //alert(selected);
        $(".desc").hide();
         $('#' + selected).show();
      }).change()
 });
</code></pre>

<p>or </p>

<pre><code> $(function(){
  $('#Analytics').show(); // Will show the div
  $('.selectOption').change(function(){
    var selected = $(this).find(':selected').text();
    //alert(selected);
    $(".desc").hide();
    $('#' + selected).show();
  });
 });
</code></pre>
