Show/Hide different forms based on a option selected

Question

I would like to know how to show/hide different forms based one form's selection.

In the sample code below all three forms are automatically set to display:none. I would like to only show one of the "hidden" forms if its corresponding value is selected from the "shower" form. So if option "Form 1" is selected from the "shower" form, then show Form 1 below; if option "Form 2" is selected from the "shower" form, then show Form 2; and so on.

Preferably with a fade in/out animation to it or another light animation.

Here is a sample...

<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>

Thanks for any help with this.

Answer 1

You can use jQuery to help you with it :

<form id="form-shower">
<select id="myselect">
<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_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

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

<form name="form_name3" id="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>
<script>
$("#myselect").on("change", function() {
    $("#" + $(this).val()).show().siblings().hide();
})
</script>

I added an id to your select and change the id name of your three forms :)

Hope it helps :)