Maintain the selection sequence in multi select dropdown

[vijay@spinetechnologies]

Hi Paramveer,

We have a requirement to maintain the user selection sequence.

For example, if the dropdown has Sun, Mon, Tue, Wed, Thu, Fri, and Sat options and the user opts for the values on Wed, Sat, and Sun,

As per the dropdown behavior, whenever I fetch the values I receive values as Sun, Wed, Sat. The same happens while setting values back to the dropdown.

Is it possible to maintain the sequence?

[paramvir]

you can use the following code to maintain the selection sequence. Key is to save the values in an array in change event and  keep the values unique.

Code: [Select]

var arr = [];
$("#select1").pqSelect({
    multiplePlaceholder: 'Select Countries',   
    checkbox: true //adds checkbox to options   
}).on("change", function(evt){
    var val = $(this).val();
arr.push(...val);
        //remove the duplicates.
arr = arr.filter((value, index, array) => array.indexOf(value) === index);
alert(arr);
})


[vijay@spinetechnologies]

Hi Paramvir,

Thank you for the response.

From the change function, I can get the values. However, I can not set the values to the dropdown.

In my case, I am getting the values from the dropdown and storing them in the DB. When the user revisits the same page I want to set the data to the dropdown with its given sequence.

So is there any function, or event where I can set the values to the dropdown with the proper sequence?

[paramvir]

Values can be set from an array in pqSelect with this code but the order would that of the options in the select list and not of the array.

Code: [Select]

$("#select1").val( arr ).pqSelect('refreshData');