javascript - Make a textbox appear when a value is selected from a dropdown list in MVC - Stack Overflow

admin管理员组

文章数量:1406178

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>

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>

• javascript
• asp-mvc
• drop-down-menu
• textbox

Share Improve this question Follow edited Mar 5, 2015 at 18:24 abatishchev 100k8888 gold badges301301 silver badges442442 bronze badges asked Mar 5, 2015 at 14:50 ScannerScanner 62711 gold badge1010 silver badges2020 bronze badges 4

• 2 When you specify an ID with JQuery, make sure you use a #. $("SelectType").trigger("change"); doesn't use one, and neither does $("Other").change(function () {. The only time you don't use anything, (meaning a . or a # or similar) is when you're selecting by element type, for example $('form').submit()'. – Inspector Squirrel Commented Mar 5, 2015 at 14:53
• 1 Also $('.OtherSpecify').show(); won't work because you have given your element an ID of OtherSpecify, not a class. Using $('.OtherSpecify') would select all elements of class OtherSpecify. – Inspector Squirrel Commented Mar 5, 2015 at 14:55
• So it would need a class and an ID? – Scanner Commented Mar 5, 2015 at 14:58
• Yep, you should select that with $('#Other') because that's the ID you gave it using Razor :) – Inspector Squirrel Commented Mar 5, 2015 at 14:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

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.

本文标签： javascriptMake a textbox appear when a value is selected from a dropdown list in MVCStack Overflow