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

Question

我正在学习asp.net mvc 5.

我dropdownlistfor的工作很完美,并根据其价值展示了正确的领域.但问题是当页面第一次加载时显示所有字段..

问题是:我希望默认在页面首次加载时不显示任何内容.

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

和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();
            }
        });
    });

首次加载页面时:

当我选择Paypal时:

当我选择电子支票时:

当我回到默认值时:

Answer 1

首先,创建一个包含hide方法的函数:

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

然后,调用上面的函数以div在第一次加载页面时以及选择默认值时隐藏所有选项元素,如下所示:

$(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();
        }
    });
});

简化示例:JSFiddle演示