当dropdownlistfor更改时,jQuery隐藏/显示div,MVC

时间:2018-08-31 10:01:21

标签: javascript jquery model-view-controller

这是我的_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>

我正在尝试在页面加载时隐藏ID为OtherPurposeID的div,然后当我在下拉列表中选择“其他用途”(数据库中ID为32)时,将显示div OtherPurposeID。

jquery也包含在包中,脚本文件夹中以及节脚本中。

jQuery脚本如何或为什么不起作用?

(编辑:)
我还尝试使用f12查看chrome浏览器中的javascript中是否有任何错误,根本没有显示任何错误。
同样,在页面加载时,其他目的div也可见。甚至简单的.hide()都不起作用

0 个答案:

没有答案