jQuery Chosen - 更新选择列表而不丢失选择

Question

我正在尝试使用 jQuery 插件“Chosen”

（http://harvesthq.github.com/chosen/ 和 https://github.com/harvesthq/chosen)

在我的项目中。

我想要实现的是根据用户选择更新列表（ajax 调用（基于树的结构））

这不是更大的问题，因为我可以使用 .chosen().change(function()) 并删除所有未使用的选择项，然后 .append 新的。

然后我可以使用 .trigger("liszt:updated") 来更新列表，但不幸的是所有选择都被删除。

有谁知道如何在不丢失所选数据的情况下更新所选列表的方法？

理论上，我可以手动删除所有选定的生成

元素，然后填充新元素，但是获取 SELECT“值”数据时会出现问题。

Answer 1

如果您保存所选项目，这应该相当简单。例如：

<select data-placeholder="Choose a country..." style="width:350px;" multiple="true"  class="chosen-select">
$(".chosen-select").chosen();

现在，在更新所选项目之前，请确保像这样保存所选项目：

var chosenSelectedItems = $(".chosen-select").val(); // this gets you the select value data
// Update the select items
$('.chosen-select').trigger('liszt:updated');
$(".chosen-select").val(chosenSelectedItems);

这应该能够重置更改之前的原始值。

Answer 2

新代码现在更新列表而不会丢失选择，并且根据选项顺序对选择进行排序。

$('.chosen-select').trigger('chosen:updated');

参考他们的项目页面。

Answer 3

这将在 xhr 请求（刷新列表）后重新加载选择，并在新项目列表不包含先前选择的项目时删除选择：

var chosenSelectedItems = $(".chosen-select").val();  
$('select#GroupsStr').empty();

$.each(xhr.ReturnValue, function (index, item) {
    var newOption = $('<option value="' + index + '">' + item + '</option>');
    $('select#GroupsStr').append(newOption);
});

$("select#GroupsStr").val(chosenSelectedItems).trigger("chosen:updated");

Answer 4

我使用 selected 创建了一些级联或依赖下拉菜单，但除了 knockoutjs 之外我还使用了它们。 KnockoutJS 用于将数据（在您的例子中是选择）绑定到对象和 DOM 元素。 Knockout 还允许您创建自定义绑定来处理他们可能没有预料到的开箱即用的事情。话虽这么说，我为淘汰赛创建了一个使用 Chosen 的自定义绑定，结果很好...

在我们的例子中，我们允许用户选择一个频道（使用 selected），然后我们加载到他们的位置（通过显示或创建另一个选择）元素）并触发我们的自定义绑定，该绑定将更新数据并触发我们的自定义绑定，该绑定将告诉所选对象运行 .trigger("liszt:updated") 但将数据保留在后台。

我们的代码是相当专有的，我不知道它是否一定会轻松地向您展示如何实现这一目标，但这也许会给您提供另一种看待它的方式。