Hide show drop down on basis of index change of drop down using jquery

See more:

jQuery

Hi Everyone,

I develop simple web page in which i create a drop down which is hide by default. and on change of other drop down it will visible in slow slide fashion. it works fine in all browser but except internet explorer. I will provide code below please solve my problem.

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
 
 function showSeries(val)
{
	if(val != 0)
	{
		$("#drp_series").show("slow");
		$("#btn_go").css("margin-right","305px");
	}
	else
	{
	 document.getElementById('drp_series').selectedIndex = 0;
	 $("#drp_series").hide();
	 $("#btn_go").css("margin-right","469px");
	 $("#main_content").hide();
	}
}
</script>

<select id="drp_dept" class="text-boxx" onchange="showSeries(this.value)"  >
		<option value="0">--Select--</option>
		<option value="1">DEBT</option>		
		</select>

<select id="drp_series" class="text-boxx" style="display:none;" >
		<option value="0">--Select--</option>
		<option value="1">Series 1-A</option>
		<option value="2">Series 1-B</option>
		<option value="3">Series 1-C</option>
		</select>