Bootstrap select picker automatically sorting based on key

Question

I am using Bootstrap selectpicker for populating the select box.

I have the data in the DB table like this,

*cId*  *CountryName*
1      Australia
2      Belgium
3      Canada
4      India
5      Zimbabwe
6      Brazil

What I am doing is ordering the data based on countryName and populating cId as option element's key and countryName as option element's value

function loadJSONtoSelectBox(selector, options)
{
   $(selector).selectpicker();
   $.each(options, function(key, value) {
       $('<option data-tokens="'+value+'" value="' + key + '">' + value + '</option>').appendTo(selector);
       $(selector).focus();
  });

  $(selector).selectpicker('refresh');
}

But internally it is sorting based on option's value attribute i.e it is showing Brazil(cid is 6) at the end instead of after Belgium, what is the hack to solve this issue? how can I turn off that internal sorting?

Fiddle link https://jsfiddle.net/14a3h2bt/

For more reference check my comment here: https://github.com/silviomoreto/bootstrap-select/issues/1476

Answer 1

I have just wrote some JavaScript for your solution.

For this we can do like sorting things. So i was sorting your content alphabetical.

Please take a look in Fiddle. Hope it will help you. :)

$(document).ready(function() {
  var options = $('.dropdown-menu .text');
  var arr = options.map(function(_, o) {
    return {
      t: $(o).text(),
      v: o.value
    };
  }).get();
  arr.sort(function(o1, o2) {
    return o1.t.toUpperCase() > o2.t.toUpperCase() ? 1 : o1.t.toUpperCase() < o2.t.toUpperCase() ? -1 : 0;
  });
  options.each(function(i, o) {
    o.value = arr[i].v;
    $(o).text(arr[i].t);
  });
});

Answer 2

Taking a look to bootstrap-select.js you can see in the

createLi: function () {

the option elements of the select are selected and trasformed in li tag using:

this.$element.find('option').each(function (index) {

So, there is no sorting on values (i.e.: keys or cId). There is no sorting at all.

A proof of this is a static select with the option rearranged according to what you want to see (Bazil is at the 3th position even if the value is 6):

$(function () {
  $('.selectpicker').selectpicker({});
  
  
  $('.selectpicker').on('changed.bs.select', function(e) {
    console.log('Value is: ' + this.options[this.selectedIndex].value +
                ' Text is: ' + this.options[this.selectedIndex].textContent);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js"></script>


<select class="selectpicker" tabindex="-98">
    <option data-tokens="Australia" value="1">Australia</option>
    <option data-tokens="Belgium" value="2">Belgium</option>
    <option data-tokens="Brazil" value="6">Brazil</option>
    <option data-tokens="Canada" value="3">Canada</option>
    <option data-tokens="India" value="4">India</option>
    <option data-tokens="Zimbabwe" value="5">Zimbabwe</option>
</select>

Said that, I may suggest you to sort the options (in this case on client side, but you can do this directly on your server side):

function loadJSONtoSelectBox(selector, options) {
  $(selector).selectpicker({});
  $.each(options, function (key, value) {
    $('<option>', {'data-tokens': value, 'value': key, 'text': value}).appendTo(selector);
    $(selector).focus();
  });

  //
  // Sort Items by Text
  //
  $(selector + ' option').sort(function(a, b) {
    return a.textContent.localeCompare(b.textContent);
  }).appendTo(selector);

  $(selector).selectpicker('val', '1').selectpicker('refresh');
}

$(function () {
  var opt = {
    '1': 'Australia',
    '2': 'Belgium',
    '3': 'Canada',
    '4': 'India',
    '5': 'Zimbabwe',
    '6': 'Brazil'
  };
  loadJSONtoSelectBox('.selectpicker', opt);

  $('.selectpicker').on('changed.bs.select', function(e) {
    console.log('Value is: ' + this.options[this.selectedIndex].value +
                ' Text is: ' + this.options[this.selectedIndex].textContent);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
</select>