多选 MVC 的异步更新选项列表答案

【问题标题】：Asynchronous updating list of options for multi select MVC多选 MVC 的异步更新选项列表
【发布时间】：2014-01-17 18:48:05
【问题描述】：

我正在制作一个供用户输入的表单，其中一个项目（多选项选择）具有过多的选择（约 1600 个），因此必须对其进行过滤以使其易于消化。我有 3 个过滤器字段（下拉菜单），在我向数据库进行 AJAX 回调并获取更新列表之前，我需要完成这些字段。它类似于How to filter the options of a drop down list using another drop down list，但是我也不想丢失之前选择的任何项目。这是我原型化的函数的签名：

public JsonResult GetContentStandardsForUser(string type, string grade, string subject, List<SelectListItem> selected)

我想要的是返回新的项目列表（而不是丢失已经选择的项目），并更新选择列表。

这个 AJAX 调用会是什么样子（使用 jquery）？我应该只在查询中包含当前选择的值，还是可以像上面写的那样传递SelectListItems？

【问题讨论】：

您的意思是您不想丢失之前选择的任何项目？您希望用户从这个多选项选择中进行选择，调整过滤器，然后继续进行选择吗？
是的，就是这样。所以，假设他们从 4 级中选择了一个内容标准，然后他们将过滤器更改为 5 级，我希望之前的选择保留在集合中。
如果有帮助，可以把它想象成挑选一支梦幻足球队。我有一整套联盟中所有的 NFL 球员，我希望能够按 QB/RB/WR 过滤，挑选一些球员，调整过滤器，并且不会丢失我已经挑选的球员。

标签： c# javascript jquery ajax asp.net-mvc

【解决方案1】：

在考虑了我展示的梦幻足球示例后，我想出了一个解决方案。我做了 two 多选，一个可用，一个选中。只有“选定”列表绑定到模型——可用列表是查询结果更新的内容。

如果有人能提出单选控制解决方案，我仍然很感兴趣，但目前这对我来说是一个很好的解决方法。我正在寻找单选解决方案的原因是我已经在使用这个插件 (http://www.virtuosoft.eu/code/bootstrap-duallistbox/) 来过滤我的选定/可用列表。

ETA：我意识到我可以使用 jquery 在单个列表框中执行此操作。使用 ID 遍历选项，如果未选中，则将其删除。然后从查询中添加所有新选项。瞧！

ETA2：现在有代码了！

        //Filter content standards
        $("#csType, #csGrade, #csSubject").change(function(){
            var type = $("#csType").val();
            var grade = $("#csGrade").val();
            var subject = $("#csSubject").val();

            if(type != "" && grade != "" && subject != "")
            {
                $("#csList option:not(:selected)").remove();

                var items="";
                $.getJSON("@Url.Action("GetContentStandardsForUser","Summary")", {type:type, grade:grade, subject:subject} ,function (data) {
                    $.each(data,function(index,item){
                        items+="<option value='"+item.Value+"'>"+item.Text+"</option>"
                    });
                    $("#csList").append(items)
                    $("#csList").trigger('bootstrapduallistbox.refresh', true);
                });
            }
        });

【讨论】：

【解决方案2】：

绑定选项后，调用如下函数。

$('#csList').multiselect('rebuild');

【讨论】：