problem in slideDown and slideUp

problem in slideDown and slideUp

hello, 
code of slide.html is as follows :

<html>
<head>

<script  src="select.js"></script>
<script  src="jquery-2.1.1.js"></script>

<title>Home page</title>

</head> 



<body bgcolor="#E6EBF5" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<fieldset>   
<legend>Select A or B</legend>
<form id="form_A_B" action="" name="Frm" method="POST">


<table width="100%" border="0" cellspacing="1" cellpadding="1" align="center">

<tr Style="font-size: 1pt">
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>

<tr Style="font-size: 1pt">
<td colspan="2" align="center">


<fieldset>


<table>
<tr>
<td class="" colspan="2" align="center">
<select id="types">
<option>select A</option>
<option>select B</option>
</select>
</td>
</tr>
</table>
</fieldset>

</td>
</tr>
</table>
</form>

<form id="form_A" action="" name="Frm" method="POST">


<table width="100%" border="0" cellspacing="1" cellpadding="1" align="center">

<tr>
<td colspan="2" align="center">
<fieldset>
<legend>A</legend>

<table>
   
<tr>
<td class="" colspan="2" align="center">
<select id="typesA">
<option>A1</option>
<option>A2</option>
</select>
</td>
</tr>
</table>

</fieldset>
</td>
</tr>

</table>
</form>

<form id="form_B" action="" name="Frm" method="POST">
<table width="100%" border="0" cellspacing="1" cellpadding="1" align="center">

<tr>
<td colspan="2" align="center">
<fieldset>
<legend>B</legend>

<table>
   
<tr>
<td class="" colspan="2" align="center">
<select id="noteTypes17">
<option>B1</option>
<option>B2</option>
</select>
</td>
</tr>
</table>

</fieldset>
</td>
</tr>

</table>


</form>


<form id="form_A1" action="" name="Frm" method="POST" >

Form A1
</form>

<form id="form_A2" action="" name="Frm" method="POST">

Form A2
</form>


<form id="form_B1" action="" name="Frm" method="POST">
Form B1

</form>


<form id="form_B2" action="" name="Frm" method="POST">

Form B2
</form>



</fieldset>
</body>
</html>



code of select.js :

$(document).ready(function(){

alert('hello');

$("#form_A").hide();
$("#form_B").hide();
$("#form_A1").hide();
$("#form_A2").hide();
$("#form_B1").hide();
$("#form_B2").hide();



$('#types').change(function()
{
if($('#types').val()!='select A')
{
$("#form_A").slideUp("slow",function(){
$("#form_B").slideDown("slow");
});
}
if($('#noteTypes').val()!='select B')
{
$("#form_B").slideUp("slow",function(){
$("#form_A").slideDown("slow");
});
}
});






$('#typesA').change(function()
{
if($('#typesA').val()!='A1')
{
$("#form_A1").slideUp("slow",function(){
$("#form_A2").slideDown("slow");
});
}
if($('#typesA').val()!='A2')
{
$("#form_A2").slideUp("slow",function(){
$("#form_A1").slideDown("slow");
});
}
});


$('#typesB').change(function()
{


if($('#typesB').val()!='B1')
{
$("#form_B1").slideUp("slow",function(){
$("#form_B2").slideDown("slow");
});
}
if($('#typesB').val()!='B2')
{
$("#form_B2").slideUp("slow",function(){
$("#form_B1").slideDown("slow");
});
}
});

});

The Problem :

when the page loaded for the first time all the form are hidden except the  form_A_B.
when the user selects the select A then form_A is shown. in this form when the user selects the A1 then the form_A1 is shown and when the user selects the A2 then the form_A2 is shown.
same logic applies when the user selects the select B in the form form_A_B.


when the user gets the form_A1 visible and at this time user selects the select B and navigate through the B and B1 then the user gets the form_B1 visible. but after the form_B1 gets visible the form_A1 is still visible on the webpage. 
i want to hide this form_A1 to be hidden using slideDown and slideUp methods when the user selects the select B in the form form_A_B.

thanks in advance
nishi kishore