i will like to show the "Single_Line" Div at default but can't works, it only able to show and hide when i change the selected value at drop down. I try use the Load function but it will show all Div. Anyone can guide me?

Below is my code:

<script>

    $('#dropDown').load(function () {
        $('.drop-down-show-hide').hide();
        $('#' + this.value).show();
    });

    $('#dropDown').change(function () {
        $('.drop-down-show-hide').hide();
        $('#' + this.value).show();
    });

</script>

View.cshtml:

<div id="Single_Line" class="drop-down-show-hide">
    <br />
    <div class="editor-label">
        @Html.LabelFor(model => model.MaxChar)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.MaxChar)
        @Html.ValidationMessageFor(model => model.Qext_Text)
    </div>
</div>

<div id="Multiple_Line" class="drop-down-show-hide">
    <br />
    <div class="editor-label">
        @Html.LabelFor(model => model.NumberOfLines)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.NumberOfLines)
        @Html.ValidationMessageFor(model => model.NumberOfLines)
    </div>
</div>

Dropdown List:

@Html.DropDownListFor(model => model.Question_Type, new SelectList(
                          new List<Object>{

                               new { value ="Single Line" , text = "Single_Line" },
                               new { value ="Multiple Line" , text = "Multiple_Line" },                         
                            },
                          "text",
                          "value",
                      0), new { @id = "dropDown" })

Related posts

Recent Viewed