JQuery Chosen - Update Choice List Without Losing Choice

Question

I am trying to use the jQuery "Chosen" plugin

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

in my project.

What I'm trying to achieve is a list of updates based on user choice ( ajax call ( tree based structure ))

This is no longer a problem because I can use .chosen().change(function()) and remove all unused select elements, and then .append new ones.

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

Does anyone know a way to update the selected list without losing the selected data?

In theory, I can manually delete all selected generated items

and then populate them with new ones, but then it's a problem with getting the SELECT value "data".

Answer 1

This should be pretty simple if you save the selected items. For instance:

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

Now, before updating the selection, make sure that you have saved the items selected as follows:

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

It should be able to reset the initial values ​​before changing.

Answer 2

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

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

Link to the page .

Answer 3

I created several cascading or dependent drop-down lists using the selected ones, but I used them in addition to knockoutjs. KnockoutJS is used to bind data (in your case, to a selection) to the object and the DOM element. Knockout also allows you to create custom bindings to handle things that they might not have expected right out of the box. With that said, I created a custom knockout binding that Chosen used, and it worked out well ...

In our case, we allow users to select a channel (using the selected one), which we then load at their locations (either by displaying or creating another selection item), and launch our custom binding, which will update the data and launch our custom binding, which will select .trigger("liszt:updated") , but save the data in the background.

Our code is pretty proprietary, and I don’t know that it will definitely show you how to achieve this, but perhaps this will give you another way to look at it.