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元素具有相同的ID。 然后，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>

Answer 2

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