The chosen multiple select result outputs always in ascending order of the array, regardless of the selected order. I couldn't find information related to ordering in the JHtml attribute array.

I need the output to sort as selected by the user. example:

<select id="items" name="items" size="2" multiple>
  <option value="tomato">Tomato</option>
  <option value="meat">Meat</option>
  <option value="cheese">Cheese</option>

When the values output using the following method


The returned order is tomato,meat,cheese though cheese was selected first.

Is there an ordering parameter available, similar to the following example which will return the output in the order of selection?

JHtml::_('formbehavior.chosen', 'select', null, ['set_order' => 'order']);
  • It will probably be better to rethink the design. Perhaps do add-able single selects. This way they will be indexed / sorted when submitted. Dec 30, 2018 at 1:31
  • @mickmackusa the values will not be submitted to the DB. An onclick method inserts the values to a text field. The select field options are sourced from the DB. Single check boxes will not populate properly and will appear as clutter.
    – Nadal
    Dec 30, 2018 at 4:11
  • So you want to use jquery to "shift" each selected option above all of the unselected options? Conversely, if an option is deselected, then where should it be moved to? Bottom of the list? First of unselected options? This is a cool challenge and may be do-able, I'll see if I can mock something up as a demo. My coding time is a bit limited in January, so you may want to carry on trying to self-solve. Jan 2, 2019 at 7:37
  • I am assuming that you are using .join() on your second input field. Can you please show your javascript in your question? Might you be happy to more simply send the array of selected options on submit (omitting the extra field)? Jan 2, 2019 at 11:26
  • @mickmackusa it's an editors-xtd plugin to insert selected options to the text body. I hacked together a solution, though I had to incorporate another library - select2 3.5.4 - and use a function (found at SO, just can't find the URL) to incorporate jQuery sortable UI. Each selected option is draggable in the chosen pseudo field and remains in the sorted order when submitted to the editor text area. I tried to use a jQ plugin called chosen-sortable which did enable drag sorting, but I could not get it to maintain the order when inserted, and time was a factor.
    – Nadal
    Jan 2, 2019 at 23:00

1 Answer 1


Working solution used.

Included jQuery Select2 3.5.4 plugin which is similar to jQuery Chosen so it's kind of an overkill, but it worked. https://github.com/select2/select2/releases/tag/3.5.4

Function to process drag sorting by anonymous user https://stackoverflow.com/questions/25344372/select2-with-drag-and-drop-sorting

// load jQuery libraries
JHtml::_('jquery.ui', array('core', 'sortable'));

// load select2 files

// script intialize
jQuery(function ($) {
    select2sortable: function(){
        var select = $(this);
        $(select).select2({width: 220});
        var ul = $(select).prev('.select2-container').first('ul');
            placeholder : 'ui-state-highlight',
            forcePlaceholderSize: true,
            items       : 'li:not(.select2-search-field)',
            tolerance   : 'pointer',
            stop: function() {
                $($(ul).find('.select2-search-choice').get().reverse()).each(function() {
                    var id = $(this).data('select2Data').id;
                    var option = select.find('option[value=\"' + id + '\"]')[0];

// ID of multiple select field append to function

<select id="selectorder" size="2" multiple="multiple">
  <option value="item1">Item 1</option>
  <option value="item2">Item 2</option>


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.