mvc 4 jquery功能与dropdownlist和window.onload问题有关

mvc 4 jquery functions with dropdownlist and window.onload issues

本文关键字：onload window 问题 dropdownlist jquery 功能 mvc      更新时间：2023-09-26

我在使两组函数正确工作时遇到问题。我有一个change函数，它显示和隐藏了一个按预期工作的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？

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

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

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

带有字符串文字

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

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

带有整数文字。

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

希望能有所帮助。

感谢David Tansey把我推向了正确的方向。在进一步研究了.onload函数并试图调和SelectedGenderId之间的差异后，我想出了这个解决方案来正确识别函数的状态（使用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>
相关文章：