Chosen: Keep Multiple Selection Order

Question

I am using Chosen's Multiple selection. I want to be able to track user selected order. For example, if a user select option2 first then option1, I want to get the result in the order of option2 and option1. But chosen sorts user selected options. Is there a way I can tell chosen to not sorting the result?

Answer 1

I wrote a simple plugin to use along with Chosen. It allows you to retrieve the selection order of a Chosen multiple select element, and also to set it from an array of ordered values.

It is available on Github : https://github.com/tristanjahier/chosen-order

It is compatible with Chosen 1.0+ and with both jQuery and Prototype versions. There is also a plugin for each framework, which let you do things like this:

Retrieve the selection order

var selection = $('#my-list').getSelectionOrder(); 

Set the selected values in order

var order = ['nioup', 'plop', 'fianle']; // Ordered options values $('#my-list').setSelectionOrder(order); 

Check it out.

Answer 2

There is a https://github.com/mrhenry/jquery-chosen-sortable/ plugin now available, which does the job for chosen v1.

For newer versions of chosen, you need to replace chzn- with chosen- in the github JS file.

To use, it I use the following code:

jQuery('#myselect').addClass('chosen-sortable').chosenSortable(); 

It works very well, but you will need some more code, when editing the field again to re-order the elements after chosen has loaded.

I use the following for this. Given a list of sortedElements and $select = jQuery('#myselect'):

var $container = $select.siblings('.chosen-container') var $list = $container.find('.chosen-choices');  // Reverse the list, as we want to prepend our elements. var sortedElements = sortedElements.reverse();  for (var i = 0; i < sortedElements.length; i++) {   var value = sortedElements[i];    // Find the index of the element.   var index = $select.find('option[value="' + value + '"]').index();    // Sort the item first.   $list           .find('a.search-choice-close[data-option-array-index="' + index + '"]')           .parent()           .remove()           .prependTo($list); } 

This works very well here.