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

html, javascript, jquery, jquery-select2

Solution

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/

Problem

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.

Original source