Jquery скрыть / показать div, когда выпадающий список для изменения, MVC

Question

это мой _Layout.cshtml, раздел тела

@RenderBody()

    @if (IsSectionDefined("Scripts"))
    {
        @RenderSection("Scripts", required: false)
    }

    @section Scripts{
        @Scripts.Render("~/bundles/jquery-3.3.1.js")
        @Scripts.Render("~/bundles/jquery-3.3.1.min.js")

        <script>
            function hideOnLoad() {
                $('#OtherPurposeFormGroup').hide();
            }

            function showOnSelect() {
                $('#OtherPurposeFormGroup').show();
            }

            $(document).ready(function () {
                hideOnLoad();
                $('#SelectPurposeID').change(function () {
                    var value = $(this).val();
                    if (value == '32') {
                        showOnSelect();
                    }
                    else {
                        hideOnLoad();
                    }
                });
            });
        </script>
    }

теперь вот create.cshtml как частичное представление

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="col-md-4">
                    <div class="form-group">
                        @Html.LabelFor(model => model.Clearance.Purpose, htmlAttributes: new { @class = "control-label" })&nbsp;(<b style="color: #ff0000;">*</b>)
                        <br>
                        @Html.DropDownListFor(model => model.Clearance.Purpose, listItems, "", new { @class = "form-control", @id = "SelectPurposeID" })
                        @Html.ValidationMessageFor(model => model.Clearance.Purpose, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="col-md-4" id="OtherPurposeFormGroup">
                    <div class="form-group">
                        @Html.LabelFor(model => model.Clearance.OtherPurpose, htmlAttributes: new { @class = "control-label" })&nbsp;(<b style="color: #ff0000;">*</b>)
                        <br>
                        @Html.EditorFor(model => model.Clearance.OtherPurpose, new { htmlAttributes = new { @class = "form-control", @id = "OtherPurposeID" } })
                        @Html.ValidationMessageFor(model => model.Clearance.OtherPurpose, "", new { @class = "text-danger" })
                    </div>
                </div>

Я пытаюсь скрыть div с идентификатором OtherPurposeID при загрузке страницы, затем, когда я выбираю в раскрывающемся списке «Другое назначение» (с 32 в качестве идентификатора в базе данных), будет показан div OtherPurposeID.

jquery также входит в комплект, в папку сценария, также в сценарий раздела.

как или почему не работает скрипт jquery?

(редактирование:)
я также попытался посмотреть, есть ли какая-либо ошибка в javascript в браузере Chrome с использованием f12, он вообще не показывает никаких ошибок.
также, когда страница загружается, div других целей виден. даже простой .hide () не работает