Question

我们有一个下拉列表，如果您选择＆＃34; Unsatisfactory＆＃34;然后应该出现一个保留字段。我们正在使用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

<%= file_field_tag 'file-field', required: true %>

MVC - 显示或隐藏（div）字段，取决于下拉列表

2 个答案: