Выпадающий список Cascade в MVC с использованием Javascript теряет значения после обратной передачи

Question

В моем приложении MVC есть раскрывающийся каскадный список, в котором отображается ОК. Я использую это для поиска в базе данных и отображения в таблице. Однако, когда я нажимаю кнопку поиска, второе выпадающее меню теряет свои значения и становится пустым.

Это мой код контроллера

[HttpGet]
    public ActionResult TrainingReport()
    {
        DataSet dataSet = new DataSet();
        GetDepartment();
        int skillsId = 0;
        dataSet = DataViewer.GetTrainingReport(_connectionString, skillsId);
        return View(dataSet);
    }
    [HttpPost]
    public ActionResult TrainingReport(string departmentList,string id)
    {
        int skillsId = Convert.ToInt32(id);
        DataSet dataSet = new DataSet();
        GetDepartment();
        //JsonResult jsonResult = GetSkills(Convert.ToInt32(departmentList));
        dataSet =  DataViewer.GetTrainingReport(_connectionString, skillsId); 
        return View(dataSet);
    }
    public JsonResult GetSkills (int DepartmentId)
    {
        db.Configuration.ProxyCreationEnabled = false;
        var items = db.Skills
                    .Where(x => x.DepartmentId == DepartmentId)
                    .Select(x => new SelectListItem
                    {
                        Value = x.SkillsId.ToString(),
                        Text = x.SkillsDescription.ToString()
                    })
                    .ToList();
        return Json(items, JsonRequestBehavior.AllowGet);
    }
    public void GetDepartment ()
    {
        int depType = (from deptType in db.DepartmentTypes
                       where deptType.DepartmentTypeName == "Skills Department"
                       select deptType.DepartmentTypeId).FirstOrDefault();

        var departmentList = (from dept in db.Departments
                              where dept.DepartmentTypeId == depType
                              select new
                              {
                                  dept.DepartmentId,
                                  dept.DepartmentName

                              }).ToList();
        ViewBag.Department = new SelectList(departmentList, "DepartmentId", "DepartmentName");

    }

}

Это мой cs html код

<section id="main-content">
<section class="wrapper site-min-height">
    <h3>
        Training Report
    </h3>
    <hr />
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    @using (Html.BeginForm("TrainingReport", "Data", FormMethod.Post))
                    {
                        <label id="lblSearch" title="Search By:">Search By:</label>
                        @Html.DropDownList("departmentList", ViewBag.Department as SelectList, "Select Department")

                        <select name="id" id="skills" data-url="@Url.Action("GetSkills","Data")"></select>
                        <button name="Button">Search</button>
                    }

                </div>
                @*@using (Html.BeginForm("TrainingReport", "Data", FormMethod.Get))*@
                {
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                    <tr>
                                        <th>
                                            REQUIRES TRAINING
                                        </th>
                                        <th>
                                            STARTED TRAINING
                                        </th>
                                        <th>
                                            Competent to Complete Task
                                        </th>
                                        <th>
                                            Competent to Train Others
                                        </th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @if (Model.Tables.Count > 0)
                                    {
                                        <tr class="gradeU">
                                            <td>
                                                <table class="table table-striped table-bordered table-hover">
                                                    @foreach (DataRow row in Model.Tables[0].Rows)
                                                    {
                                                        <tr class="gradeU">
                                                            <td>@row["Requires Training"]</td>
                                                        </tr>
                                                    }
                                                </table>
                                            </td>
                                            <td>
                                                <table class="table table-striped table-bordered table-hover">
                                                    @foreach (DataRow row in Model.Tables[1].Rows)
                                                    {
                                                        <tr class="gradeU">
                                                            <td>@row["Started Training"]</td>
                                                        </tr>
                                                    }
                                                </table>
                                            </td>
                                            <td>
                                                <table class="table table-striped table-bordered table-hover">
                                                    @foreach (DataRow row in Model.Tables[2].Rows)
                                                    {
                                                        <tr class="gradeU">
                                                            <td>@row["Competent to Complete Task"]</td>
                                                        </tr>
                                                    }
                                                </table>
                                            </td>
                                            <td>
                                                <table class="table table-striped table-bordered table-hover">
                                                    @foreach (DataRow row in Model.Tables[3].Rows)
                                                    {
                                                        <tr class="gradeU">
                                                            <td>@row["Competent to Train Others"]</td>
                                                        </tr>
                                                    }
                                                </table>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                @*}*@
            </div>

        </div>
    </div>
</section>

Это мой Java код скрипта

@section PageJavaScript{
@*You can add your custom JavaScript for each page on this section. This section will be added to the bottom of the page.*@
<script type="text/javascript">
    $(function () {
        $("#departmentList").change(function (e) {
            var $Skills = $("#skills");
            var url = $Skills.data("url") + '?DepartmentId=' + $(this).val();
            $Skills.empty();
            $.getJSON(url, function (items) {
                $.each(items, function (a, b) {
                    $Skills.append('<option value="' + b.Value + '">' + b.Text + '</option>');
                });
            });
        });
    });
</script>