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

jQuery Chosen - update select list without losing selections

提问by PsychoX

I'm trying to use jQuery plugin "Chosen"

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

(http://harvesthq.github.com/chosen/and https://github.com/harvesthq/chosen)

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

in my project.

在我的项目中。

What I'm trying to achieve is update list basing on user selection (ajaxcall (tree based structure))

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

This is no bigger problem, because i can use .chosen().change(function())and remove all unused select items and then .append new ones.

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

Then I can use .trigger("liszt:updated")to update list, but unfortunately all selections are deleted..

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

Does anyone know a way how to update chosen list without loosing selected data?

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

In theory I can manually remove all chosen generated

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

elements and then populate with new ones, but then is a problem with getting SELECT "value" data.

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

回答by Anshuman Biswas

This should be fairly simply if you save the items selected. For example:

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

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

Now, before updating the chosen, make sure you save the items selected like this:

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

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);

This should be able to reset the original values before the change.

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

回答by konyak

The new code now updates the list without losing the selections, and it sorts the selections based on the options order.

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

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

Reference their project page.

参考他们的项目页面。

回答by SZL

This will reload the selection after xhr request (refresh list) and delete the selection if the new item list not contains the earlier selected item:

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

回答by afreeland

I have created a few cascading or dependent dropdowns using chosen, but I have used them in addition to knockoutjs. KnockoutJS is used for binding data (in your case the select) to an object and a DOM element. Knockout also allows you to create custom bindings to handle things they may not have anticipated straight out of the box. With that being said I created a custom binding for knockout that utilized Chosen and it turned out well...

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

In our case we allow users to select a channel (using chosen) we then load in their locations (either by displaying or creating another select element) and trigger our custom binding which will update the data and trigger our custom binding that will tell chosen to run .trigger("liszt:updated")but keep the data in the background.

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

Our code is rather proprietary and I don't know that it would necessarily show you easily how to achieve this, but perhaps this will give you another way of looking at it.

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