1

我有一个简单的问题，只是让我难以理解。我看过很多例子，但就是无法找到正确的代码。问题：仅当从下拉列表中选择“其他”时，我才需要显示文本输入字段。

我的 JavaScript：

@{
    ViewBag.Title = "Create Client";
    var showGenderDescription = false;
    var showSettingDescription = false;
}

<script src="~/Scripts/jquery-2.0.3.js"></script>
<script>
    $(function () {
        $('#GenderId').change(function () {
            if ($("#GenderId").val() == 3) {
            showGenderDescription = true;

            }
        });

        $("#SettingId").change(function () {
            if ($("#SettingId").val() == 1) {
                showGenderDescription = true;
            }
        });

    });
</script>

我的查看代码：

@using (Html.BeginForm())
{
    <div class="editor-label">
        @Html.LabelFor(model => model.GenderId, "Gender")
    </div>
    <div class="editor-field">
        @Html.DropDownList("GenderId", (SelectList)ViewBag.GenderId, "--Select One--", new { id = "GenderId"})
        @Html.ValidationMessageFor(model => model.GenderId)
    </div>

    @if(showGenderDescription)
    {
        <div class="editor-label">
            @Html.LabelFor(model => model.GenderDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.GenderDescription)
            @Html.ValidationMessageFor(model => model.GenderDescription)
        </div>
    }
}

下拉列表在回发到控制器时可以正常工作，但我想显示描述输入框。还没有看到任何会重复这种行为的东西（无论如何都没有在我的搜索中）。一如既往，任何帮助将不胜感激！

4

2 回答 2

2

您设置的方式showGenderDescription，只会检查一次。要将其绑定到任何更改，请使用类（或类似的）来包装“其他”输入字段：

<div class="gender-description">
    <div class="editor-label">
        @Html.LabelFor(model => model.GenderDescription)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.GenderDescription)
        @Html.ValidationMessageFor(model => model.GenderDescription)
    </div>
</div>

然后你可以在 JS 函数中显示/隐藏它change：

if ($("#GenderId").val() == 3) {
    $(".gender-description").show();
} else {
    $(".gender-description").hide();
}
于 2013-08-18T02:40:15.477 回答
1

我为编辑器添加了一个父 div 并更改了 Jquery 功能。如果有任何问题请告诉我

脚本

<script>
    $(function () {
    $("#ShowGenderDescriptionContainer").css("display","none");
        $('#GenderId').change(function () {
            if ($("#GenderId").val() == 3) {
        $("#ShowGenderDescriptionContainer").css("display","block");
            }
        });
        $("#SettingId").change(function () {
            if ($("#SettingId").val() == 1) {
                $("#ShowGenderDescriptionContainer").css("display","block");
            }
        });
    });
</script>

看法

@using (Html.BeginForm())
    {
        <div class="editor-label">
            @Html.LabelFor(model => model.GenderId, "Gender")
        </div>
        <div class="editor-field">
            @Html.DropDownList("GenderId", (SelectList)ViewBag.GenderId, "--Select One--", new { id = "GenderId"})
            @Html.ValidationMessageFor(model => model.GenderId)
        </div>
        <div id = "ShowGenderDescriptionContainer">
            <div class="editor-label">
                @Html.LabelFor(model => model.GenderDescription)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.GenderDescription)
                @Html.ValidationMessageFor(model => model.GenderDescription)
            </div>
        </div>
    }
于 2013-08-18T02:51:28.190 回答