根据下拉列表中的选择隐藏或显示div

Question

这是MVC注册表，并且存在下拉字段UserType，当用户从下拉字段中选择Researcher时，我需要隐藏下潜（id =“ UserNameAr”和id =“ UserNameEn，id =” CR“）并且当用户选择发布者显示并立即显示此字段（id =“ UserNameAr”和id =“ UserNameEn，id =” CR“）

@model WebApplication3.Models.RegisterViewModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create New Account</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })


    <div class="form-group" id="UserType">
        @Html.LabelFor(m => m.UserType, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.DropDownList("UserType", null, new { @class = "form-control" })
        </div>
    </div>


    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
        </div>
    </div>



    <div class="form-group" id="UserNameAr">
        @Html.LabelFor(m => m.UserNameAr, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserNameAr, new { @class = "form-control" })
        </div>
    </div>



    <div class="form-group" id="UserNameEn">
        @Html.LabelFor(m => m.UserNameEn, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserNameEn, new { @class = "form-control" })
        </div>
    </div>









    <div class="form-group">
        @Html.LabelFor(m => m.CR, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.CR, new { @class = "form-control" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.PhoneNumber, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.PhoneNumber, new { @class = "form-control" })
        </div>
    </div>



    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}