当从 MVC 的下拉列表中选择一个值时出现一个文本框

Question

当从 DDL 中选择 "Other" 时，我只想显示文本框。但是它总是显示而不是隐藏直到被调用。

我的视图标记是：

<div class="form-group">
@Html.LabelFor(model => model.SelectType, "Select Type", new { @class = "control-label col-md-5" })
<div class="col-md-1">
    @Html.DropDownList("SelectType", null, new { @id = "Other" })
    @Html.TextBoxFor(model => model.OtherSpecify, new { @id = "OtherSpecify" })
    @Html.ValidationMessageFor(model => model.SelectType)
</div>

我尝试了以下两个 javacript 代码都没有成功

<script>
    document.addEventListener("DOMContentLoaded", function () {
        $("SelectType").trigger("change");
    })
    $("#SelectType").on("change", function () {
        if ($("#SelectType option:selected").val() == 3) {
            $("#OtherSpecify").hide();
        } else {
            $("#OtherSpecify").show();
        }
    });
</script>   

<script>
    document.addEventListener("DOMContentLoaded", function () { $("SelectType").trigger("change");
    })
    $(function () {
        $('.OtherSpecify').show();

        $("Other").change(function () {
            if ($(this).is(":selected")) {
                $(this).parent().next().hide();
            }
            else {
                $(this).parent().next().show();
            }
        });
    })
</script>

Answer 1

首先您应该检查 jQuery selectors 是如何工作的。在 HTML 上面 '$("#SelectType")' - 是你的 select 和 $("#OtherSpecify") 是你的文本框。如果您正在使用 jQuery，您应该一直使用它。使用 $(handler) 代替 DOMContentLoaded 事件：

<div class="form-group">
    <div class="col-md-1">
        @Html.DropDownList("SelectType", new List<SelectListItem> { 
                new SelectListItem{Text = "test 1", Value = "1"}, 
                new SelectListItem{Text = "test 2", Value = "2"}, 
                new SelectListItem{Text = "Other", Value = "3"} 
            }, new { @id = "SelectType" })
        @Html.TextBox("OtherSpecify", "")
    </div>
</div>
@section Scripts {
    <script>
        $(function() {
            $("#SelectType").on("change", function() {
                if (parseInt($("#SelectType").val()) == 3) {
                    $("#OtherSpecify").show();
                } else {
                    $("#OtherSpecify").hide();
                }
            });
            $("#SelectType").trigger("change");
        });
    </script> 
}

记得在加载 jQuery 库后放置脚本。在大多数情况下 @section Scripts 完成工作。

Answer 2

我必须进行一些调整才能使 Javascript 正常工作。首先，我分离出我的 HTML 个助手：

<div class="form-group">
                    @Html.LabelFor(model => model.SelectType, "Select Type", new { @class = "control-label col-md-5" })
                    <div class="col-md-1">
                        @Html.DropDownList("SelectType", String.Empty)
                        @Html.ValidationMessageFor(model => model.SelectType)
                    </div>
                </div>

                <div class="form-group" id="OtherSpecifyFormGroup">
                    @Html.LabelFor(model => model.OtherSpecify, new { @class = "control-label col-md-4" })
                    <div class="col-md-4 sbchanged">
                        @Html.TextBoxFor(model => model.OtherSpecify)
                        @Html.ValidationMessageFor(model => model.OtherSpecify)
                    </div>
                </div>

然后写了下面的JavaScript代码：

<script>
            $(document).ready(function () {
                //this line fires no matter what
                $("#OtherSpecifyFormGroup").hide();
                $("#SelectType").change(function () {
                    var value = document.getElementById("SelectType").value;
                    if (value == "4") {
                        $("#OtherSpecifyFormGroup").show("highlight", { color: "#7FAAFF" }, 1000);
                    }
                    else {
                        $("#OtherSpecifyFormGroup").hide();
                    }
                });
            })
        </script>

我为其他表单组指定了一个 ID，以便最初可以隐藏文本框。然后声明变量 "value" 因为在我的数据库中填充 DDL 的值具有 SelectType ID，因此它不会调用 "Other" 因为它未被识别但如值“4”时所示称之为有效！ else 确保如果选择任何其他 DDL 值，则再次隐藏文本框。

当从 MVC 的下拉列表中选择一个值时出现一个文本框

Make a textbox appear when a value is selected from a dropdown list in MVC

javascript

asp.net-mvc

drop-down-menu

textbox