piechuckerr piechuckerr - 2 months ago 32
jQuery Question

Bootstrap select picker automatically sorting based on key

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

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>

Comments