Question

我在MVC5中有一个下拉菜单＆＃34;查看＆＃34;通过更改页面的下拉部分将显示和隐藏。我喜欢在页面加载中调用此函数但是工作不正常它会在页面加载时显示所有文本框，因为我不知道如何发送＆＃34; e＆＃34;到页面加载，当我更改下拉列表时，它给了我这个错误：

  Microsoft JScript runtime error: 'toggleDIvDisplay' is undefined

这是我的代码：

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">

$(document).ready(

function toggleDIvDisplay(e) {

    if (e == 1) {
        $('#divAppName').hide();
        $('#divSSN').hide();
        $('#divRemref').hide();

    }

    if (e == 2) {
        $('#divAppName').show();
        $('#divSSN').hide();
        $('#divRemref').hide();

    }

    if (e == 3) {
        $('#divSSN').show();
        $('#divAppName').hide();
        $('#divRemref').hide();
    }


    if (e == 4) {
        $('#divRemref').show();
        $('#divSSN').hide();
        $('#divAppName').hide();

    }

这是下拉列表：

Search By: @Html.DropDownList("ddl", (SelectList)ViewBag.DropDownValues, new   { @onchange = "toggleDIvDisplay(this.value)" })

感谢大家的回答。解决方案是添加以下行：

 $(document).ready(function () {
    toggleDIvDisplay(1);
});

Answer 1

在$(document).ready()中定义函数后，只需调用它：

toggleDIvDisplay(1);

以上假设您希望将e设置为1时的页面加载行为。

$(document).ready(
    function toggleDIvDisplay(e) {
        // ... your implementation, removed for brevity
    }

    toggleDIvDisplay(1);
);

Answer 2

首先我不认为你应该在document.ready中创建函数， From this link

在document.ready之外定义它将使页面加载后可以访问jS。

Answer 3

假设ddl是您的下拉菜单的id，您可以试试这个。

编辑： 简化了您的条件。

$(function() {
    $('#ddl').on('change', function() {
        var value = $(this).val();

        $('#divAppName, #divSSN, #divRemref').hide();

        if (value == 2) {
            $('#divAppName').show();
        }       
        else if (value == 3) {
            $('#divSSN').show();
        }       
        else if (value == 4) {
            $('#divRemref').show();
        }

    });
});

Answer 4

您可以通过以下方式编写函数：它获取函数本身内部下拉列表的值：

function setDivVisibility() {
    var e = $('#ddl').val();

    if (e == 1) {
        // Show/Hide elements
    } else if (e == 2) {
        // Show/Hide elements
    }
    // and so on...
}

然后在文档就绪时首次调用该函数：

$(document).ready(function() {
    setModeVisibility();
});

加分：对于不引人注目的JavaScript，请将其放入文档准备就绪，这样您就不需要使用html混合的onchange行为。

$('#ddl').change(function () {
    setModeVisibility();
});

根据MVC 5中的下拉选项显示/隐藏部分页面

4 个答案: