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

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

这是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>
}