Prevent multiple select element from automatically sorting the value assigned to it basis the order of the indexes in the options

Question

I am using the select2 plugin to convert a multiple select html element to a more presentable format. Also I don't think my question is very much dependent on the plugin.

What the plugin does internally is -

this.select.val(val);

where this.select points to the hidden multiple select element.

On feeding the function above a val of say - 2,4,0 ,
the value stored as confirmed when I do an alert(this.select.val()) is 0,2,4 , i.e. with automatic unwanted sorting according to the order of the options in the select element.. :/

DEMO - http://jsfiddle.net/rohanxx/DYpU8/ (thanks to Mark)

Is there a way to preserve the sort order after feeding in the value to my select element?

Thanks.

Codpiece

For those wanting to help, JSFiddle: jsfiddle.net/eXGnY/4 – Chrystalchryste

thanks, that actually required a minor edit and now my problem is brought fully to the fore. – Codpiece

Answer 1

This is a very good question. I think this is more to do with the multiselect html element, rather than select2.

If you have a normal multiselect, there is no "order" sort of speak. You just have a list in the original order, with either each item selected or not.

I'm almost 100% sure there is a better way of doing this than the below, but for a workaround it should do just fine.

End result:

JavaScript code

// 'data' brings the unordered list, while 'val' does not
var data = $('#e1').select2('data');

// Push each item into an array
var finalResult = [];
for( item in $('#e1').select2('data') ) {
    finalResult.push(data[item].id);
};

// Display the result with a comma
alert( finalResult.join(',') );

JSFiddle:

http://jsfiddle.net/DYpU8/4/

Chrystalchryste

Hi Mark, thanks for the response. While this does help me get the right output - the larger picture where I would like to show the results for editing on the page, will require manual setting of the value using the some select2 function. Thinking of using a hidden field maybe that integrates directly with the plugin to post values to the server. – Codpiece

this field would kinda work independent of the parent select object and just update itself with the selected values on the change event. – Codpiece

how can i send them before submit ? as i tried but select2 keep reverting the list. should i add a hard coded hidden select ? then update its value using jquery on submit event. then send it with the form to the server instead of sending select2 values ? so the original select will be hidden and select2 will be only on the client side ? – Monophagous

Answer 2

A little late for an answer but I actually found a way of doing this.

Keep in mine that this method will hide the options that are already selected, because for my use case it looked better, plus it needs to be that way in order the choices to be in the order the user made them.

$('.my-multi-select').select2('Your Options').on("select2:select", function (e) {
    $('[data-option-id="' + e.params.data.id + '"]').insertBefore(_this.find('option:not(:selected):eq(0)'));
}).on("select2:open", function () {
    _this.append(_this.find('option:not(:selected)').sort(function (a, b) {
        return +a.getAttribute('data-sort-order') - +b.getAttribute('data-sort-order');
    }));
});

And for the styles

.select2-results__option[aria-selected=true]{
    display:none !important;
}

You will want to make sure you know how the jQuery .sort() function works for you to be able to modify this for your own needs.

Basically what this is doing is when you select an option, it gets hidden and then placed at the bottom of the other selected options, which are before the unselected options. And when you open the drop down, it sorts all of the unselected options by their pre-determined sort order.

Mosesmosey