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

【问题标题】：jQuery Chosen - update select list without losing selectionsjQuery Chosen - 更新选择列表而不丢失选择
【发布时间】：2012-02-23 13:46:34
【问题描述】：

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

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

在我的项目中。

我想要实现的是根据用户选择更新列表 (ajax call (tree based structure))

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

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

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

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

元素，然后用新元素填充，但随后是获取 SELECT“值”数据的问题。

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案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);

这应该可以在更改之前重置原始值。

【讨论】：

非常老的 api：liszt: --> 新的：chosen:
你拯救了我宝贵的夜晚。
请记住 trigger("chosen:updated") 必须在 val(chosenSelectedItems); 之后；

【解决方案2】：

新代码现在在不丢失选择的情况下更新列表，并根据选项顺序对选择进行排序。

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

参考他们的project page。

【讨论】：

对不起，输入文本的输入呢？如果我打开了下拉菜单并将一些option 元素添加到所选的select 然后如果调用$('.chosen-select').trigger('chosen:updated'); 并且焦点在输入上并且输入了一个文本，则当前输入的文本将从输入并显示所有建议的下拉列表。即使在“选择：更新”之后，如何保留键入的输入文本并因此仅显示与输入中的文本匹配的选项？

【解决方案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");

【讨论】：

【解决方案4】：

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

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

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

【讨论】：