Bootstrap select picker根据key自动排序

Question

我正在使用 Bootstrap selectpicker 填充 select 框。

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

*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）而不是在比利时之后，解决这个问题的技巧是什么？我怎样才能关闭内部排序？

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

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

Answer 1

我刚刚为您的解决方案写了一些 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);
  });
});

Answer 2

看看 bootstrap-select.js 你可以在

中看到

createLi:函数(){

select 的选项元素在 li 标签中使用 select 编辑和转换：

this.$element.find('option').each(函数(索引){

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

一个证明是静态的select，选项根据你想看到的重新排列（Bazil 位于第 3 个位置，即使值为 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>

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

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>

Bootstrap select picker根据key自动排序

Bootstrap select picker automatically sorting based on key

javascript

jquery

twitter-bootstrap

bootstrap-selectpicker