javascript - 基于下拉列表的显示和隐藏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 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 Demonstration