Question

I have a this Html code

<select class="selectOption">
    <option>Analytics</option>
    <option>Translation</option>
    <option>Poll</option>
</select>

<div id="changingArea">
    <div id="Analytics" class="desc">Analytics</div>
    <div id="Translation" class="desc">Translation</div>
    <div id="Poll" class="desc">Poll</div>
</div>​

Css

.desc {display: none;}​

Js

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

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.

Example
http://jsfiddle.net/bsqVm/

EDIT:

Thank you guys for your help

First there was a typo in my code, so ‘selectOtion’ should be ‘selectOption’

Second to make the default select to show we can trigger the change event on DOMReady as ‘undefined’ solution

so the javascript is

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

or

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

Answer 1

There is a typo in your code selectOtion should be selectOption. For showing the the div according to selected value you can trigger the change event on DOMReady.

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

http://jsfiddle.net/XCUDF/