Select2 : How to get custom sort in Select2

Question

I have a select field where users can select & I am using Select2 for multiple selection.

<select id="currency" name="currency_cc">
    <option value="BDT">BDT - Bangladesh</option>
    <option value="USD">USD - USA</option>
    <option value="ZWL">ZWL - Zimbabwe</option>
</select>

But the problem is if I select option 2 from the list & then select option 1, then select2 places option 1 val before option 2, but I selected option 2 first.

I want option 1 to be placed after option 2 as I selected in this order, How do I can do this? I think there's nothing on official documentation.

But I seen this working in a JS Fiddle which I get from the following Q/A page: jQuery select2 control - retrieve last selected element

and the fiddle is: http://jsfiddle.net/jEADR/1588/

Check, there's it works like I wanted, but it doesn't behave like that in my code.

Someone please help.

Answer 1

I managed to make it work with the following code, (I collected it from somewhere else & no longer can remember from where)

    var $select2 = $('#currency-converter-currencies').select2({
            templateSelection: template,
            width: '100%'
        }).val({!! $setting->convert_currencies !!}).trigger('change');

    // cache order of initial values
    var defaults = $select2.select2('data');
    defaults.forEach(function (obj) {
        var order = $select2.data('preserved-order') || [];
        order[order.length] = obj.text;
        $select2.data('preserved-order', order);
    });

    function select2_renderSelections($select2) {
        var order = $select2.data('preserved-order') || [];
        var $container = $select2.next('.select2-container');
        var $tags = $container.find('li.select2-selection__choice');
        var $input = $tags.last().next();

        // apply tag order
        order.forEach(function (val) {
            var $el = $tags.filter(function (i, tag) {
                return $(tag).data('data').id === val;
            });
            $input.before($el);
        });
    }

    function selectionHandler(e) {
        var $select2 = $(this);
        var val = e.params.data.id;
        var order = $select2.data('preserved-order') || [];

        switch (e.type) {
            case 'select2:select':
                order[order.length] = val;
                break;
            case 'select2:unselect':
                var found_index = order.indexOf(val);
                if (found_index >= 0) order.splice(found_index, 1);
                break;
        }
        $select2.data('preserved-order', order); // store it for later
        select2_renderSelections($select2);
    }

    $select2.on('select2:select select2:unselect', selectionHandler);



    /**
     * Put select option's value instead on text in select box
     * @param data
     * @param container
     */
    function template(data, container) {
        return data.id;
    }

Here we replacing original Select2 values with our filtered values using the "template" function.

This shouldn't be the permanent fix, Consider it as a temporary fix because of the way this programmed.

Hope this will help someone else in the future