Afficher/Masquer les différentes formes basé sur une option sélectionnée

Je voudrais savoir comment faire pour afficher/masquer des formes différentes en fonction d'un formulaire de sélection.

Dans l'exemple de code ci-dessous toutes les trois formes sont automatiquement mis en display:none. Je voudrais seulement montrer l'un des "caché" des formes si sa valeur correspondante est sélectionnée à partir de la "douche". Donc, si l'option "formule 1" est sélectionné à partir de la "douche", puis afficher le Formulaire 1 ci-dessous; si l'option "2" est sélectionné à partir de la "douche", puis afficher le Formulaire 2, et ainsi de suite.

De préférence avec un fade in/out de l'animation ou de l'autre de la lumière de l'animation.

Voici un échantillon...

<form id="form-shower">
<select>
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_3" style="display:none">
<!---- THIS IS FORM 3---->
</form>

Merci pour toute aide à ce sujet.

OriginalL'auteur gdinari | 2012-08-14