Question

当用户在我的下拉列表中选择一个值时，我遇到隐藏和显示正确div的问题。我想显示/隐藏不同的div，具体取决于下拉列表中的用户选择。现在在页面上重新加载错误的div正在显示，但是下拉列表中的正确值就在那里。我知道在页面加载时我的Jquery函数是说显示这个div并隐藏该div但我无法弄清楚如何以其他方式解决该问题。

HTML：

@using (Html.BeginForm("Search", "Logs", FormMethod.Get, new {@class = "merchant-form"}))
{
    <div class="left-col">
        <div class="form-group">
            @Html.LabelFor(model => model.PortalName)
            @Html.EnumDropDownListFor(model => model.PortalName, "Välj logg", new {@class = "form-control"}) 
            @Html.ValidationMessageFor(model => model.PortalName, "", new {@class = "text-danger"})
        </div>
    </div>
    <div style="clear: both;" id="clear">
        &nbsp;
    </div>
    <div id="api_logging">
        <div class="left-col">
            <div class="form-group">
                @Html.LabelFor(model => model.PhoneNumber)
                @Html.EditorFor(model => model.PhoneNumber, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.OrderNumber)
                @Html.EditorFor(model => model.OrderNumber, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.OrderNumber, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.PersonalIdentityNumber)
                @Html.EditorFor(model => model.PersonalIdentityNumber, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PersonalIdentityNumber, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
    <div id="merchant_logging" class="hidden">
        <div class="left-col">
            <div class="form-group">
                @Html.LabelFor(model => model.UserName)
                @Html.EditorFor(model => model.UserName, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.PhoneNumber)
                @Html.EditorFor(model => model.PhoneNumber, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.PersonalIdentityNumber)
                @Html.EditorFor(model => model.PersonalIdentityNumber, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PersonalIdentityNumber, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.RequestId)
                @Html.EditorFor(model => model.RequestId, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.RequestId, "", new { @class = "text-danger" })
            </div>

        </div>
    </div>

JQUERY：

 $(document).ready(function (e) {
        $('#api_logging').show();
        $('#merchant_logging').hide();

        $('#PortalName').change(function () {
            if ($(this).val() == 1) {
                $('#api_logging').show();
                $('#merchant_logging').hide();

            } else {
                $('#merchant_logging').show();
                $('#api_logging').hide();
            }
        });
    });


    $('#merchant_logging').removeClass('hidden');

Answer 1

试试这个：

$(document).ready(function(e) {
  var portal = $('#PortalName');
  
  toggleElements(portal.val()); // set initial state

  portal.change(function() {
    toggleElements($(this).val());  // set state on change
  });
});

function toggleElements(portalVal) {
  if (portalVal == 1) {
    $('#api_logging').show();
    $('#merchant_logging').hide();
  } else {
    $('#merchant_logging').show();
    $('#api_logging').hide();
  }
}

在页面重新加载时显示/隐藏<div>并取决于下拉列表值MVC

1 个答案: