javascript - MVC - 根据下拉列表显示或隐藏 (div) 字段

Question

我们有一个下拉列表，如果您选择“不满意”，则应显示“保留”字段。我们正在使用 MVC 5，但我们所拥有的在这里不起作用:

下拉:

List<SelectListItem> satisfactionLevel = new List<SelectListItem>();
satisfactionLevel.Add(new SelectListItem
{
    Text = "Satisfactory",
    Value = "Satisfactory"
});
satisfactionLevel.Add(new SelectListItem
{
    Text = "Unsatisfactory",
    Value = "Unsatisfactory",
});

字段:

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

        <div class="form-horizontal">

           <div id="QPerformance" class="form-group row">
                @Html.LabelFor(model => model.QPerformance, htmlAttributes: new { @class = "control-label col-md-2" })
                <div  class="col-md-10">
                    @Html.DropDownListFor(model => model.QPerformance, satisfactionLevel, "----Select----")
                    @Html.ValidationMessageFor(model => model.QPerformance, "", new { @class = "text-danger" })
                </div>
            </div>


            <div id="QRetention" class="form-group" style="visibility: hidden">
                @Html.LabelFor(model => model.QRetention, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.QRetention, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.QRetention, "", new { @class = "text-danger" })
                </div>
            </div>
    }

JavaScript部分，当我们更改下拉列表时，这部分我们无法使字段显示或隐藏:

  @section Scripts {
    <script type="text/javascript"  src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(function hideOnLoad() {
            $('#QRetention').hide();
        });


        $(function () {
            $(document).ready(function () {
                $('#QPerformance').change(function () {
                    if ($(this).val() != 'Unsatisfactory') {
                        $('#QRetention').hide();
                    } else {
                        $('#QRetention').show();
                    }
                });
            });
        });

    </script>
        }

Answer 1

您的问题是:Razor 将您的 @Html.LabelFor(model => model.QPerformance) 元素渲染为其父 div 元素。 那么js将无法正常工作。

您可以更改您的 div id 来解决该问题。

<div id="QPerformanceGroup" class="form-group row">

<div id="QRetentionGroup" class="form-group" >

还有js

<script type="text/javascript">
    $(function () {
        if($('#QPerformance').val() != 'Unsatisfactory')
        {
            $('#QRetentionGroup').hide();
        }

        $('#QPerformance').change(function () {
            if ($(this).val() != 'Unsatisfactory') {
                $('#QRetentionGroup').hide();
            } else {
                $('#QRetentionGroup').show();
            }
        });
    });

</script>