带有下拉列表和 window.onload 问题的 mvc 4 jquery 函数答案

【问题标题】：mvc 4 jquery functions with dropdownlist and window.onload issues带有下拉列表和 window.onload 问题的 mvc 4 jquery 函数
【发布时间】：2013-08-31 16:10:07
【问题描述】：

我在让两组函数正常工作时遇到问题。我有一个更改函数，它显示和隐藏一个按预期工作的 div，但在加载页面时无法让 window.onload 函数正常工作，并且不影响 .change 函数的工作方式。

函数脚本：

<script src="~/Scripts/jquery-2.0.3.js"></script>
<script>

    $(function () {
        window.onload = function () {
            if ($("#SelectedGenderId").val() == "3") {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
            if ($("#SelectedSettingId").val() == "1") {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        }

        $("#GenderId").change(function () {
            if ($("#GenderId").val() == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
        });

        $("#SettingId").change(function () {
            if ($("#SettingId").val() == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        });
    });
</script>

.change 函数按预期工作，但 .onload 没有。我是否正确使用了 .onload？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我很确定问题是由于您在 onload() 中的测试（if 语句）与您在 change() 事件中处理它的方式不同。

在onload() 中，您使用以下测试：

if ($("#SelectedGenderId").val() == "3")

带有字符串字面量

但在您使用的 change() 事件中

if ($("#GenderId").val() == 3)

带有整数字面量。

我怀疑即使您正在测试的控件在每种情况下都不同，但您并没有真正打算以两种不同的方式处理这些值。

希望对您有所帮助。

【讨论】：

有很多不同的方法来处理下拉列表，我决定使用一个将 SelectedGenderId 作为字符串（不能使用 int）和一个 selectList 传入的 viewModel。这与 .change 函数配合得很好。我不想在这里讨论如何实现下拉列表的利弊。有没有办法使用模型中当前发送的 GenderId 值来处理 onload() 函数？
你的onload() 被调用了吗？在其中放置一个alert()。我对在$(document).ready() 内部指定的window.onload 有点困惑（在您的情况下使用简写$( function () {})）。看看这篇文章中接受的答案：stackoverflow.com/questions/9095401/…希望有帮助。
我在 window.onload 调用中放置了一个 alert() ，是的，它正在被调用。并且 .change 功能正在运行。所以问题就变成了我如何在 .onload 函数中查看来自模型的任何数据？

【解决方案2】：

感谢 David Tansey 将我推向正确的方向。在进一步查看 .onload 函数并尝试调和 SelectedGenderId 之间的差异之后，SelectedGenderId 需要成为与 dropdownlistfor html helper 一起使用的字符串，我想出了这个解决方案来正确识别函数的状态（使用 alert() 来查看IF 语句何时触发。

<script>
    $(function () {
        window.onload = function () {
            if (('@Model.Client.GenderId') == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
            if (('@Model.Client.SettingId') == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        }

        $("#GenderId").change(function () {
            if ($("#GenderId").val() == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
           }
        });

        $("#SettingId").change(function () {
            if ($("#SettingId").val() == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        });
    });

</script>

对于任何试图实现类似功能的人来说，这里是信息：

    <div class="editor-label">
        @Html.LabelFor(model => model.Client.GenderId, "Gender")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.SelectedGenderId, Model.Genders, new { id = "GenderId" })
        @Html.ValidationMessageFor(model => model.Client.GenderId)
    </div>

    <div class="gender-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.Client.GenderDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Client.GenderDescription)
            @Html.ValidationMessageFor(model => model.Client.GenderDescription)
        </div>
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Client.SettingId, "Settings")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.SelectedSettingId, Model.Settings, new { id = "SettingId" })
        @Html.ValidationMessageFor(model => model.Client.SettingId)
    </div>

    <div class="setting-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.Client.SettingDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Client.SettingDescription)
            @Html.ValidationMessageFor(model => model.Client.SettingDescription)
        </div>
    </div>

【讨论】：