Razor hide / show div onchange select - asp.net-mvc

Question

I am new to MVC C# Razor, I have done this in PHP and I tried to use my previous code in Jquery (as shown below)
<script>
$(document).ready(function(){
$('.CurrentStatus').change(function () {
if(this.value == "Non-Teaching") {
$('#div-CurrentTDepartment').fadeOut('fast');
$('#div-CurrentTPostion').fadeOut('fast');
$('#div-CurrentNTDepartment').fadeIn('fast');
$('#div-CurrentNTPostion').fadeIn('fast');
}
else if (this.value == "Teaching") {
$('#div-CurrentTDepartment').fadeIn('fast');
$('#div-CurrentTPostion').fadeIn('fast');
$('#div-CurrentNTDepartment').fadeOut('fast');
$('#div-CurrentNTPostion').fadeOut('fast');
}
else {
$('#div-CurrentTDepartment').fadeIn('fast');
$('#div-CurrentTPostion').fadeIn('fast');
$('#div-CurrentNTDepartment').fadeIn('fast');
$('#div-CurrentNTPostion').fadeIn('fast');
}
});
});
</script>
and this is my Create code
<div class="form-group">
#Html.LabelFor(model => model.Status, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Status", new SelectList(ViewBag.Statusdll, "Value", "Text"), "Select Status", new { #class = "form-control", #onchange = "location = this.value;" })
</div>
</div>
<div class="form-group" id="div-NTDepartment">
#Html.LabelFor(model => model.NTDepartment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NTDepartment, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group" id="div-NTPosition">
#Html.LabelFor(model => model.NTPosition, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NTPosition, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group" id="div-TDepartment">
#Html.LabelFor(model => model.TDepartment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TDepartment, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
The error is - if you select a 'Non-Teaching' on the dropdown, it shows a 404 error of the page '/Employees/Non-Teaching', which is really a 404 error because I don't have any page like that.
It should only hide or show the divs in the page.

Answer 1

Because you have add the event onchange = "location = this.value; which is effectively window.location.href = TheValueOfYourSelectedOption when an option is selected.
Remove that from the attributes your adding to #Html.DropDownList() and instead use
$('#Status').change(function () {
....
or if this is applicable to multiple controls, add a class name
#Html.DropDownList( ...., new { #class = "form-control", #class = "CurrentStatus" })