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

【问题标题】：Combobox / Dropdown box not updating after its data was updated组合框/下拉框在其数据更新后未更新
【发布时间】：2012-05-31 19:35:48
【问题描述】：

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

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

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

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

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

所以，问题是如何让用户在我点击删除按钮后立即消失在组合框上？

现在，当按下删除按钮时，选定的 UserId 会传递以下 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
            }));

【问题讨论】：

您是否曾从代码的组合框中删除该选项？
好吧，我返回到组合框的集合已经删除了该记录，所以我假设做 .html([updated collection]) 应该用更新的数据替换组合框元素？我错了吗？
它会，假设数据是从服务器正确发送的。您是否将数据作为 json 编码对象返回？
是的，我返回 Json 编码的匿名鼠标类型。见底部修改过的OP。

标签： c# javascript jquery ajax model-view-controller

【解决方案1】：

就这么简单：

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

把这个放在你的removeUser()。功能。

事实上，该函数不能将用户从远程列表中删除，也可以从 DOM 中删除。希望得到帮助。

【讨论】：

所以没有办法真正绑定组合框以使其随着返回 JSON 集合的变化而更新？我必须使用 [COmbobox].remove() 手动删除客户端的 Combobox 元素？
是的，当然有办法，但是你应该使用一些框架，比如backbone.js（还有其他的，但这确实是最前沿的）。通常使用这种基于 MVC（模型、视图、控制器）模型的 javascript 框架，您拥有一组元素。当您从集合中删除一个元素时，它会自动刷新并重新呈现客户端（无需重新加载页面）。如果你想了解更多我建议从这个链接开始backbonetutorials.com

【解决方案2】：

检查您的回调函数。逻辑似乎没问题。我刚刚测试并替换了 select 的 html 将删除旧项目并添加新项目。这是fiddle for that。

在您的成功回调函数中添加几个 console.log() 调用。控制台.log（数据）； console.log(userList); console.log(listContent) 并查看它们是否包含正确的数据......或者它们是否被执行。

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

【讨论】：