jQuery选择-在不丢失选择的情况下更新选择列表

Question

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

（[http://harvesthq.github.com/chosen/和https://github.com/harvesthq/chosen）

在我的项目中。

我要实现的是基于用户选择（ajax调用（tree based structure）的更新列表]

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

然后我可以使用.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');

参考他们的project page。

Answer 3

我使用selected创建了一些级联或从属下拉列表，但是除了knockoutjs之外，我还使用了它们。 KnockoutJS用于将数据（在您的情况下为select）绑定到对象和DOM元素。敲除功能还允许您创建自定义绑定，以处理开箱即用之外的预期功能。话虽如此，我创建了一个自定义绑定，使用选择的基因敲除，结果很好...

在我们的情况下，我们允许用户选择一个通道（使用选定的通道），然后加载到他们的位置（通过显示或创建另一个select元素）并触发我们的自定义绑定，这将更新数据并触发我们的自定义绑定选择运行.trigger("liszt:updated")，但将数据保留在后台。

我们的代码相当专有，我不知道它一定会很容易地向您展示如何实现此目标，但是也许这会给您另一种查看它的方式。

Answer 4

这将在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");