Bootstrap 选择器根据键自动排序

Question

我正在使用 Bootstrap selectpicker 填充选择框。

我在数据库表中有这样的数据，

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

我正在做的是根据countryName 对数据进行排序，并将cId 填充为option 元素的键，将countryName 填充为option 元素的值

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');
}

但在内部它是基于option's 值属性进行排序的，即它在末尾显示巴西（cid 为 6）而不是在比利时之后，解决此问题的 hack 是什么？ 如何关闭内部排序？

小提琴链接https://jsfiddle.net/14a3h2bt/

更多参考请查看我的评论：https://github.com/silviomoreto/bootstrap-select/issues/1476

Answer 1

看看bootstrap-select.js你可以看到

createLi: function () {

select 的选项元素在 li 标签中被选择和转换，使用：

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

因此，没有对值进行排序（即：键或 cId）。 根本没有排序。

一个证明是静态选择，其中选项根据您想要看到的内容重新排列（即使值为 6，Bazil 也位于第 3 位）：

$(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>

也就是说，我可能会建议您对选项进行排序（在这种情况下在客户端，但您可以直接在服务器端执行此操作）：

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>

Answer 2

我刚刚为您的解决方案编写了一些 JavaScript。

为此，我们可以对事物进行排序。所以我按字母顺序对您的内容进行排序。

请查看Fiddle。希望它会帮助你。 :)

$(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);
  });
});