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.

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/