title: Bootstrap select picker automatically sorting based on key
body: <p>I am using Bootstrap <a href="https://silviomoreto.github.io/bootstrap-select/" rel="nofollow">selectpicker</a> for populating the select box.</p>
  
  <p>I have the data in the DB table like this,</p>
  
  <pre><code>*cId*  *CountryName*
  1      Australia
  2      Belgium
  3      Canada
  4      India
  5      Zimbabwe
  6      Brazil
  </code></pre>
  
  <p>What I am doing is ordering the data based on <code>countryName</code> and populating cId as <code>option</code> element's key and <code>countryName</code> as <code>option</code> element's value</p>
  
  <pre><code>function loadJSONtoSelectBox(selector, options)
  {
     $(selector).selectpicker();
     $.each(options, function(key, value) {
         $('&lt;option data-tokens="'+value+'" value="' + key + '"&gt;' + value + '&lt;/option&gt;').appendTo(selector);
         $(selector).focus();
    });
  
    $(selector).selectpicker('refresh');
  }
  </code></pre>
  
  <p>But internally it is sorting based on <code>option's</code> 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?</p>
  
  <p>Fiddle link <a href="https://jsfiddle.net/14a3h2bt/" rel="nofollow">https://jsfiddle.net/14a3h2bt/</a></p>
  
  <p>For more reference check my comment here: <a href="https://github.com/silviomoreto/bootstrap-select/issues/1476" rel="nofollow">https://github.com/silviomoreto/bootstrap-select/issues/1476</a></p>