I have two Partial view and I want to hide them depending on dropdownList value change

See more:

MVC

I have Two Customer Type And I use Service Known Type in WCF the Customer Type is Main Customer And Sub Customer. I have Dropdown List to select Customer Type When I select The Main Customer I need The Sub Customer Partial View to be hidden And vice versa

@model SoqiaRazorProject.CustomerService.CustomerData

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@{
ViewBag.Title = "Customer Data";
}

CustomerData

@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)


Customer Data


@Html.LabelFor(model => model.CustomerID)


@Html.EditorFor(model => model.CustomerID)
@Html.ValidationMessageFor(model => model.CustomerID)



@Html.LabelFor(model => model.CardID)


@Html.EditorFor(model => model.CardID)
@Html.ValidationMessageFor(model => model.CardID)



@Html.LabelFor(model => model.Type)


@Html.DropDownList("ddlCustomerType",(SelectList)ViewBag.ddlCustomerType,new{@id="ddlCustomerType"})

@Html.ValidationMessageFor(model => model.Type)




@Html.LabelFor(model => model.NationalityID)


@Html.DropDownList("ddlNationality")
@Html.ValidationMessageFor(model => model.NationalityID)



@Html.LabelFor(model => model.FamilyName)


@Html.EditorFor(model => model.FamilyName)
@Html.ValidationMessageFor(model => model.FamilyName)



@Html.LabelFor(model => model.FirstName)


@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)



@Html.LabelFor(model => model.FatherName)


@Html.EditorFor(model => model.FatherName)
@Html.ValidationMessageFor(model => model.FatherName)



@Html.LabelFor(model => model.GrandFatherName)


@Html.EditorFor(model => model.GrandFatherName)
@Html.ValidationMessageFor(model => model.GrandFatherName)



and I write this J-Query Code to Hide/Show The Partial view
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ddlCustomerType").change(function HideControls() {
var val = $("ddlCustomerType").val();
if (val == 2) {
$("MainCustomerDiv").hide();
$("SubCustomerDiv").show();
}
else if (val == 3) {
$("SubCustomerDiv").hide();
$("MainCustomerDiv").show();
}

})
});
</script>


@Html.Partial("MainCustomerData")


@Html.Partial("SubCustomerData")



<input type="submit" value="Create" />


}


@Html.ActionLink("Back to List", "Index")




When I Run the application "I try to change the dropdown list values But The Partial View Not Hidden"