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

debugcn 发表于 Dev

金成

我正在学习 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();
            }
        });
    });

页面第一次加载时：

当我选择支付宝时：

当我选择电子支票时：

当我回到默认值时：

山本哲也

首先，创建一个包含隐藏方法的函数：

// 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 演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。