Show & hide content based on select value

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

Try this: jsfiddle

Auto call event is often the simplest thing to do...

Answer 2

there is a typo in your code

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

change $('.selectOtion') to $('.selectOption')

i have updated your fiddle working fine now have a look

http://jsfiddle.net/bsqVm/4/

Answer 3

To be sure you will always show the correct div,better give value to all option,even it is the same as the text in the options,because if you have multiple languages "Analytics" on Spanish for example will have different text.so better make it like that:

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

$(function(){
      $('#Analytics').show(); // Will show the div
      $('.selectOption').change(function(){
        var selected = $(this).val(); //may store it in a variable
        //alert(selected);
        $(".desc").hide();
        //$('#'+selected).show();
        $('#' + $(this).val()).show(); //or u can just use obj value in selector to save coding
      });
});

Answer 4

You could add this line to show that div on load:

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

Here's the DEMO

Answer 5

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/