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 Demonstration

根据下拉列表显示和隐藏asp mvc 5

1 个答案: