根据下拉列表值删除字段RSS 0回复以电子邮件订阅

Remove fields according to drop down list value RSS 0 replies Subscribe via Email

本文关键字:回复 电子邮件 RSS 下拉列表 删除 字段      更新时间:2023-09-26

我有以下代码,我希望当用户将下拉值从A更改为B时,

的字段

用户和密码(标签和文本框)将被省略,我怎么做?

这是模型

public class Ad
{
    [Key]
    [Required]
    [DatabaseGenerated(DatabaseGeneratedOption.None)]
    public int ID { get; set; }
    [RegularExpression(@"^[a-zA-Z]*$", ErrorMessage = "Invalid User")]
    public string Name { get; set; }
    public string User { get; set; }
    public string Password { get; set; }
    public string Type { get; set; }
    public IEnumerable<SelectListItem> Types
    {
        get
        {
            return new[]
            {
                new SelectListItem {Value = "A", Text = "A"},
                new SelectListItem {Value = "A", Text = "B"},
                new SelectListItem {Value = "A", Text = "C"}
            };
        }
    }
}

这是视图

<div class="form-horizontal">
    <h4>Ad</h4>
    <hr />
    @Html.ValidationSummary(true)
    <div class="form-group">
        @Html.LabelFor(model => model.ID, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ID)
            @Html.ValidationMessageFor(model => model.ID)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Type, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
           @Html.DropDownListFor(model => model.Type, Model.Types)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.User, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.User)
            @Html.ValidationMessageFor(model => model.User)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Password, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>

Page source

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">

<h2>Create</h2>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

        $(document).ready(function () {
            debugger;
            $('select[name="Type"]').change(function () {
                if ($(this).val() === 'p') {
                    $('input[name="User"]').prop("disabled", true);
                    $('input[name="Password"]').prop("disabled", true);
                }
                else {
                    $('input[name="User"]').prop("disabled", false);
                    $('input[name="Password"]').prop("disabled", false);
                }
            });
        });
        $('select#Type').change(function () {
            $('#selectedOne').val($(this).val());
        });
    </script>



<form action="/ad/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="FGle3vl5PfpKQK76_Bb02PVaNQqS9K1MdIl__r7kNxsiNGueP9tkc4qvqQQ46EWXdiKO2iMKOYJzRXMk9IDAEi-vdA0VEuv4OfLC0nym94g1" />    <div class="form-horizontal">
        <h4>Ad</h4>
        <hr />


        <div class="form-group">
            <label class="control-label col-md-2" for="ID">ID</label>
            <div class="col-md-10">
                <input class="text-box single-line" data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="ID" name="ID" type="number" value="0" />
                <span class="field-validation-valid" data-valmsg-for="ID" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <input class="text-box single-line" data-val="true" data-val-regex="Invalid User" data-val-regex-pattern="^[a-zA-Z]*$" id="Name" name="Name" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Type">Type</label>
            <div class="col-md-10">
               <select id="Type" name="Type"><option value="A">A</option>
<option value="A">B</option>
<option value="A">C</option>
</select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2" for="User">User</label>
            <div class="col-md-10">
                <input class="text-box single-line" id="User" name="User" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="User" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2" for="Password">Password</label>
            <div class="col-md-10">
                <input class="text-box single-line" id="Password" name="Password" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>
<div>
    <a href="/ad">Back to List</a>
</div>

        <hr />
        <footer>
            <p>&copy; 2014 - My ASP.NET Application</p>
        </footer>
    </div>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"499bf8fae4db48ef9af85e995c0d0cac"}
</script>
<script type="text/javascript" src="http://localhost:49339/ae4883a652ba49be983288d0f9770745/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>

在HTML源代码中,已经有一些处理下拉菜单更改的功能。您需要稍微修改一下:

你可以从修改

开始
$(this).val() === 'p'

这:

$(this).val() === 'A'

如果不符合您的需要,请尝试像这样完全隐藏元素:

$('select[name="Type"]').change(function () {
    if ($(this).val() === 'A') {
        $('input[name="User"]').parents('.form-group').hide();
        $('input[name="Password"]').parents('.form-group').hide();
    }
    else {
        $('input[name="User"]').parents('.form-group').show();
        $('input[name="Password"]').parents('.form-group').show();
    }
});