CODEWITHSUNDEEP
javascriptjqueryhtmljquery-select2
Rohan
Rohan

Reputation: 3332

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

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.

Upvotes: 8

Views: 6722

Answers (2)

Brian Leishman
Brian Leishman

Reputation: 8555

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.

Upvotes: 0

Mark
Mark

Reputation: 2221

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:

enter image description here

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/

Upvotes: 4

Related Questions