当从MVC中的下拉列表中选择一个值时，会出现一个文本框 [英] Make a textbox appear when a value is selected from a dropdown list in MVC

问题描述

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

When "Other" is selected from the DDL all I want is for the textbox to appear. However it always displays instead of being hidden until called.

我的查看标记是：

<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代码

I tried the following two javacript codes without any success

<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>

推荐答案

我必须调整几件事来启用Javascript上班。首先我分开了我的HTML助手：

I have to adjust a few things to enable the Javascript to work. Firstly I seperated out my HTML helpers:

<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代码：

Then wrote the following JavaScript code:

<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>

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

I gave my form group for Other Specify an ID so that I could initially hid the textbox. Then declared the variable "value" as in my database the values that populate the DDL have SelectType Ids, therefore it wouldn't call "Other" as it wasn't recognised but as shown when the value "4" is called it works! The else ensures that if any other DDL value is selected then the textbox is hidden again.

这篇关于当从MVC中的下拉列表中选择一个值时，会出现一个文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！