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

问题

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.

My view markup is:

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

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>

回答1:

First you shoud check how jQuery selectors work. In HTML above '$("#SelectType")' - is your select and $("#OtherSpecify") is your textbox. If you are using jQuery you shoud use it all the time. Use $(handler) insted of DOMContentLoaded event:

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

Remember to place script after jQuery library is loaded. In most cases @section Scripts do the work.

回答2:

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>

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>

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.

来源：https://stackoverflow.com/questions/28880699/make-a-textbox-appear-when-a-value-is-selected-from-a-dropdown-list-in-mvc