Bootstrap select picker автоматически сортировка на основе ключа

Question

Я использую Bootstrap selectpicker для заполнения окна выбора.

У меня есть данные в таблице БД, как это,

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

То, что я делаю, упорядочивание данных на основе countryName и заселение ИДСА в качестве ключевых 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 ссылка https://jsfiddle.net/14a3h2bt/

Для получения дополнительной справки проверьте мой комментарий: https://github.com/silviomoreto/bootstrap-select/issues/1476

Answer 1

Взглянув на bootstrap-select.js вы можете увидеть в

createLi: функция() {

опционные элементы выбора выбраны и преобразуется в лиги с использованием:

это. $ Element.find ('вариант'). Каждая (функция (индекс) {

Таким образом, нет сортировки по значениям (то есть ключи .: или ИДС). Нет сортировки вообще.

Доказательством этого является статическим выбора с опцией перестроены в соответствии с тем, что вы хотите увидеть (Базиль находится на 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>

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