Question

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

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

在我的项目中。

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

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

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

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

理论上我可以手动删除所有选中的

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

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

我已经使用选择创建了一些级联或依赖的下拉列表，但除了knockoutjs之外我还使用过它们。 KnockoutJS用于将数据（在您的情况下为select）绑定到对象和DOM元素。 Knockout还允许您创建自定义绑定来处理他们可能没有预期的开箱即用的东西。话虽如此，我创建了一个使用Chosen的淘汰赛自定义绑定，结果很好......

在我们的例子中，我们允许用户选择一个频道（使用选择）然后加载它们的位置（通过显示或创建另一个选择元素）并触发我们的自定义绑定，它将更新数据并触发我们的自定义绑定告诉我们选择运行.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");

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

4 个答案: