javascript - 通过javascript重新加载后，如何让我的下拉菜单选择一个值

Question

我有一个应用程序，允许用户通过 2 个下拉菜单编辑所选接收差异的原因和下一步操作。其中一个下拉列表只是直接硬编码到 HTML 中，第二个下拉列表是通过快速 JavaScript 根据第一个下拉列表中的值加载的。

第一个下拉菜单有 14 个原因选项，每个选项有 6-12 个操作步骤选项。如果用户更改了第一个下拉原因选择，它必须返回 SQL db 并检索适当的操作步骤选项列表以用于第二个下拉列表。

所有这些都有效。

我遇到的问题是用户第一次选择要编辑的差异。那时它加载视图并根据存储在 SQL DB 中的值设置第一个下拉列表的值，然后运行 ​​java 以首先为空，然后将新的选项列表附加到第二个下拉列表。

我无法开始工作的是让它设置第二个下拉列表的值，然后运行 ​​java 以创建选项列表，再次尝试根据存储在 SQL DB 中的值来设置它以解决该差异。

如果我将第二个选项列表硬编码为与第一个列表相同，并且在第一个下拉列表更改之前不使用 java 重新加载它，那么我可以像第一个一样设置值. 然后第二个下拉列表的问题将列出大约 30-40 个选项，直到您更改第一个下拉列表 - 其中只有 6-12 个对于选择的特定原因是准确的。

我最初设置 2 个下拉值的方式，当两个列表都被硬编码时（仍然适用于第一个下拉）：

<script>
    // script to set drop down values to those stored on DB after document finished loading
    document.getElementById("ReasonDD").value = "@Model.DiscReason";      
    document.getElementById("NextActionDD").value = "@Model.NextAction";
</script>

如果第一个被更改，用于更改第二个下拉列表的脚本（再次正常工作）：

$(function () {
        $("#ReasonDD").change(function () {

            var option = $(this).val();
            $("#NextActionDD").empty();

            var url = "GetActionValues?selectedOption=" + option;

            $.post(url, function (actValues) {
                $.each(actValues, function (i, actValue) {
                    $("#NextActionDD").append($('<option></option>').val(actValue).html(actValue));
                });
            });
        });
    });

该脚本是在第一次选择差异时运行的脚本，它正确加载了第二个下拉菜单，但我已经尝试了所有 3 种显示的方式，无论是一起还是单独设置值，但到目前为止都没有。显示的 console.log 有一个有效选择，等于加载到第二个下拉列表中的值之一：

 $(function () {
        var reasonLoad = "@Model.DiscReason";
        if (reasonLoad > "") {

            var option = reasonLoad;
            $("#NextActionDD").empty();

            var url = "GetActionValues?selectedOption=" + option;

            $.post(url, function (actValues) {
                $.each(actValues, function (i, actValue) {
                    $("#NextActionDD").append($('<option></option>').val(actValue).html(actValue));
                });
            });

            console.log("@Model.NextAction");

            $("#NextActionDD").val = "@Model.NextAction";
            $("#NextActionDD").value = "@Model.NextAction";
            document.getElementById("NextActionDD").value = "@Model.NextAction";
        }
    });

我现在也尝试了 Rajesh G 的想法：

  $('#NextActionDD option[@Model.NextAction]').attr('selected','selected');

我直接在我的 console.log("@Model.NextAction") 之后添加了它，而不是并注释掉了其他 3 个。同时运行 2 个测试，用它而不是 console.log 行运行 2 个测试，总共 4 个测试。

在控制台上使用 console.log 进行的 2 次测试显示“@Model.NextAction”值为“Other”和“Wait for Vendor Response”，但随后 4 次都给出了相同的错误消息（两次都使用 console.log，两者次替换）：

错误：语法错误，无法识别的表达式：#NextActionDD option[Close Discrepency]

尽管 Close Discrepancy 不是 @Model.NextAction 值，但它是附加到 #NextActionDD 下拉列表选项列表中的最后一个选项

标签： javascripthtmlasp.net-mvc