显示和隐藏基于下拉列表的asp mvc 5

Question

I am learning asp.net mvc 5.

My dropdownlistfor is working perfect and shows right field based on its value. But the problem is when the page loaded first time it shows all field..

Problem is: I want default is showing nothing when the page first time loaded.

my cshtml:

<div class="form-group">
                    <div class="col-md-10">
                        @Html.DropDownListFor(m => m.PaymentMethod, ViewBag.PayTypeList as List<SelectListItem>, new { @class = "btn btn-primary btn-lg dropdown-toggle", @id = "PaymentId" })
                        <div id="PaypalButton">
                            <br/>
                            <script src="https://www.paypalobjects.com/api/button.js?"
                                    data-merchant="braintree"
                                    data-id="paypal-button"
                                    data-button="checkout"
                                    data-color="gold"
                                    data-size="medium"
                                    data-shape="pill"
                                    data-button_disabled="true">
                            </script>
                            <!--data-button_type="paypal_submit"-->
                        </div>
                        <div id="EcheckForm">
                            <div class="form-group">
                                <div class="col-md-10">
                                    @Html.TextBoxFor(m => m.VecInsNum, new { @class = "form-control input-lg", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18 })
                                    @Html.ValidationMessageFor(m => m.VecInsNum, null, new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                    </div>

And Js:

@section Scripts {
<script type="text/javascript">
    $(document).ready(function () {
        $('#PaymentId').change(function () {
            var value = $(this).val();
            if (value == '1') {
                $('#PaypalButton').show();
                $('#EcheckForm').hide();
            } else if (value == '2') {
                $('#PaypalButton').hide();
                $('#EcheckForm').show();
            } else {
                $('#PaypalButton').hide();
                $('#EcheckForm').hide();
            }
        });
    });

When the page first time loaded:

When I select Paypal:

when I select E-check:

When I go back to Default:

Answer 1

First, create a function which contains hide methods inside it:

// hide all div options
function hideOnLoad() {
    $('#PaypalButton').hide();
    $('#EcheckForm').hide();
}

Then, call function above to hide all option div elements when page has loaded at first time and when default value being selected as given below:

$(document).ready(function () {
    hideOnLoad(); // add this line
    $('#PaymentId').change(function () {
        var value = $(this).val();
        if (value == '1') {
            $('#PaypalButton').show();
            $('#EcheckForm').hide();
        } else if (value == '2') {
            $('#PaypalButton').hide();
            $('#EcheckForm').show();
        } else {
            hideOnLoad();
        }
    });
});

Simplified example: JSFiddle Demonstration