加载部分视图后未选择下拉值

Question

我在父视图中有两个局部视图。在父视图中有一个“div”标签，其中包含一个名为“state”的局部视图。

<div id="divState"></div></td>

局部视图中只有一个 DDL：

@Html.DropDownList("State", null, "---------- Select ----------", htmlAttributes: new { @class = "form-control" })

部分视图加载如下：

$('#divState').load('@Url.Action("LoadState", "General")');

控制器代码如下：

[HttpGet]
        public ActionResult LoadState()
        {
            if (Request.IsAjaxRequest())
            {
                ViewBag.State = new SelectList(db.Generals, "IID", "Value");
                return PartialView("_State");
            }
            else
            {
                return null;
            }
        }

我有一个打开模式对话框的链接按钮，它实际上是一个局部视图。局部视图包含几个字段和一个用于保存数据的按钮。保存后，该值将显示在状态 DDL 中，并带有最后输入的值。我编写了以下 jQuery 来存储和选择最后插入的值。

    <script type="text/javascript">
            $(function () {
                $("#btnSave").click(function () {
                    debugger;
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("SaveGeneralData", "General")',
                        data: '{name:"' + $("#Value").val() + '", description:"' + $("#Description").val() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            //alert("Id :" + response.IID);
                            var id = response.IID;
                            $('#divState').load('@Url.Action("LoadState", "General")');// Loading the partial view from controller
// to get the newly inserted value
                            $('#dialogState').dialog('close');
                            //$('div#divState select').val("5").attr("selected", "selected");
                            $("div#divState select").val("5");
                        },
                        failure: function (response) {
                            alert(response.responseText);
                            //alert("1");
                        },
                        error: function (response) {
                            alert(response.responseText);
                        }
                    });
                });
            });
    </script>

当我重新加载包含 DDL 的局部视图时，插入值显示在 DDL 中。 但我的问题是最后插入的值没有被选中。 DDL 在闪烁最后一条插入记录后显示第一个列表项（即它被硬编码为“5”）。

谢天谢地，我们会接受任何帮助。 帕萨

Answer 1

Ajax 调用是异步的，您的 $("div#divState select").val("5"); 代码行在 .load() 函数完成之前执行。

需要在成功回调中设置<select>的值

success: function (response) {
    ...
    $('#divState').load('@Url.Action("LoadState", "General")', function() {
        // set value in the callback (after the DOM has been updated)
        $("div#divState select").val("5");
    });
},

但是，不清楚您为什么要再次调用 ajax 来替换 <select>。如果第一个 ajax 调用正在将数据保存到您的 Generals 表中，因此您需要更新选项，那么您的第一个调用应该在您的 JsonResult 中返回 IID 和 Value，然后您可以创建并将新的<option> 元素附加到现有的<select>