组合框/下拉框在数据更新后未更新

Combobox / Dropdown box not updating after its data was updated

本文关键字：更新 数据 组合      更新时间：2023-09-26

一个很长的解释，但我相信这是一个非常简单的问题。我想我在这里错过了一些东西。

从下拉菜单中选择用户角色后，我将包含该角色的用户的部分视图加载到 ajax 的 DIV 中：

        $.ajax({
        type: 'post',
        data: { id: roleId},
        url: '@Url.Action("Manage","User")',
        success: function (data) {
            $("#user-manage").html(data);
        }
    });

现在，在页面上，我有一个包含用户列表和删除按钮的组合框。我突出显示一个用户，按"删除"按钮，用户被删除。

伟大！它可以工作，但是我的问题是删除的用户在刷新页面之前不会从组合框列表中消失。而且我无法刷新页面，因为这意味着网站用户必须重新选择角色。

所以，问题是我怎样才能让用户在点击那个删除按钮后立即消失在组合框中？

现在，当按下删除按钮时，将传递以下 ajax 调用，该调用将删除所选用户并返回更新的 JSON 用户列表：

    function removeUser() {
    var selectedUser = $("#user-combo").find(":selected").val(); //grab selected user
    var selectedForRole = $("#role-id").val(); //hidden field to store selected role
    $.ajax({
        url:"/User/Delete", //Delete selected user and return updated Json list
        data: { id: selectedUser , roleId: selectedForRole },
        type: 'post',
        success: function (data) {
            var userList = $("#user-combo");
            var listContent;
            $.each(data, function (index, item) {
                listContent += "<option value='" + item.Id + "'>" + item.Name + "</option>";
            });
            userList.html(listContent);
        }
    });
}

从功能上讲，这是有效的。用户被删除，但在刷新屏幕之前，我没有看到它反映在 $（"#user-combo"） 框中。

location.reload（）; 对我不起作用，因为我不希望网站用户通过选择角色来查看更新的用户列表。

如何使这种交互性，用户在我删除它们时消失并在以后添加它们时出现？

提前谢谢你。

编辑。Json 对象返回到组合框：

return Json(roleUsers.Select(x => new
            {
                Id = x.Id,
                Name = x.Name
            }));

就这么简单：

$("#comboBox option[value='USER-NAME']").remove();

把它放在你的removeUser() . 函数中。

事实上，该函数不能将用户从远程列表中删除，也可以从 DOM 中删除。慧呵呵，此帮助。

检查你的回调函数。逻辑似乎没问题。我刚刚测试过，替换select的html将删除旧项目并添加新项目。这是一个小提琴。

在成功回调函数中添加多个 console.log（） 调用。 控制台.log（数据）; 控制台.log（用户列表）; console.log（listContent） 并查看它们是否包含正确的数据...或者他们是否被处决。

对于其他可能的原因，请检查服务器上的角色用户列表。它可能包含已删除的用户 - 即，如果您将其从缓存而不是数据库中提取出来，或者您在列表加载后删除。

相关文章：