1

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>
</select>

When the values output using the following method

$("#items").val();

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. – mickmackusa Dec 30 '18 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 '18 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. – mickmackusa Jan 2 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)? – mickmackusa Jan 2 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 at 23:00
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.framework');
JHtml::_('jquery.ui', array('core', 'sortable'));
JHtml::_('behavior.multiselect');

// load select2 files
JFactory::getDocument()->addStyleSheet(Juri::root(true).'/assets/select2.css');
JFactory::getDocument()->addScript(Juri::root(true).'/assets/select2.js');

// script intialize
JFactory::getDocument()->addScriptDeclaration("
jQuery(function ($) {
$.fn.extend({
    select2sortable: function(){
        var select = $(this);
        $(select).select2({width: 220});
        var ul = $(select).prev('.select2-container').first('ul');
        ul.sortable({
            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];
                    $(select).prepend(option);
                });
            }
        });
    }
});
});

// ID of multiple select field append to function
$('#selectorder').select2sortable();
");

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

Result

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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