从MVC中的下拉列表中选择值时，将显示一个文本框

Question

当从DDL中选择“其他”时，我想要的是显示文本框。然而，它总是显示而不是被隐藏，直到被调用。

我的观点标记是：

<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＆＃39; $（＆＃34;＃SelectType＆＃34;）＆＃39; - 是您的选择，$("#OtherSpecify")是您的文本框。 如果你正在使用jQuery，你应该一直使用它。 使用DOMContentLoaded事件的$(handler)：

<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 Ids，因此它不会调用“Other”，因为它不被识别但是当调用值“4”时显示它有效！ else确保如果选择任何其他DDL值，则再次隐藏文本框。