Bootstrap selectpicker title is not sorted by user' selection order

Question

I am using Bootstrap-select plugin and I created an event to store user's selection by order in an array which works fine.

But the title of the bootstrap select is not updated based on the selection order. The selected options are sorted based on the HTML order.

I checked previous threads here but it was just about getting user's selection order which is fine for me. I need the title of the dropdown select to be updated by selection order as well.

My approach was getting the array which stores the selected options by order and do a join then updated the title and refresh the selectpicker as below, but it's not updating the title.

You can see that I selected Name then Country then City but the tile shows Country, City, Name which is the default order of the HTML. It should be Name, Country, City

Any suggestions please what I am doing wrong in code ? I commented my code in case something is not clear. Thank you.

$(document).ready(function() {  

// Initialize the selectpicker
$(".selectpicker").selectpicker();
// Declare the array which will include the selected options by order
var orderSelection = new Array();
// fire the event on every change in the select
$('.selectpicker').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
// get current selected option
var selected = $("#mySelect")[0].options[clickedIndex].value;
// check if selected exists in array, if yes then remove, if no then add it to the array
if (orderSelection.indexOf(selected) == -1) { orderSelection.push(selected); }
else { orderSelection.splice(orderSelection.indexOf(selected), 1); }

console.log(orderSelection);
  
// update the title of the select with user's selection order
 $('#mySelect').prop('title', orderSelection.join() );
 // refresh the selectpicker to see the new title
 $('#mySelect').selectpicker('refresh');
 
});

});

Bootstrap selectpicker title is not sorted by user' selection order

0 Answers