Я намагаюся зрозуміти сортування optionелементів всередині selectелемента за алфавітом. В ідеалі, я хотів би мати це як окрему функцію, де я можу просто передати елемент select, оскільки його потрібно сортувати, коли користувач натискає деякі кнопки.
Я шукав високий і низький, щоб знайти хороший спосіб зробити це, але не зміг знайти нічого, що мені підходило.
Елементи параметрів слід сортувати в алфавітному порядку за текстом, а не за значенням.
Це можливо якимось чином?
Відповіді:
Що б я зробив, це:
<option>у масив об’єктів;<option>елементи з вмістом масиву по порядку.Щоб зробити це за допомогою jQuery, ви можете зробити наступне:
var options = $('select.whatever option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
options.each(function(i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
редагувати - якщо ви хочете відсортувати так, що ви ігноруєте алфавітний регістр, ви можете використовувати JavaScript .toUpperCase()або .toLowerCase()функції перед порівнянням:
arr.sort(function(o1, o2) {
var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
Прийнята відповідь є не найкращою у всіх випадках, тому що іноді ви хочете зберегти класи опцій та різні аргументи (наприклад data-foo).
Моє рішення:
var sel = $('#select_id');
var selected = sel.val(); // cache selected value, before reordering
var opts_list = sel.find('option');
opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
sel.html('').append(opts_list);
sel.val(selected); // set cached selected value
// Для ie11 або тих, хто отримує порожні параметри, замініть html ('') empty ()
<select id="mSelect" >
<option value="val1" > DEF </option>
<option value="val4" > GRT </option>
<option value="val2" > ABC </option>
<option value="val3" > OPL </option>
<option value="val5" > AWS </option>
<option value="val9" > BTY </option>
</select>
.
$("#mSelect").append($("#mSelect option").remove().sort(function(a, b) {
var at = $(a).text(), bt = $(b).text();
return (at > bt)?1:((at < bt)?-1:0);
}));
$("#mSelect").append($options);повинно вистачити :)
.sort()має повернути число, яке менше нуля, нуля або більше, щоб відобразити взаємозв'язок впорядкування. Повернення логічного значення насправді не спрацює правильно, я не думаю.
<select id="list">
<option value="op3">option 3</option>
<option value="op1">option 1</option>
<option value="op2">option 2</option>
</select>
var options = $("#list option"); // Collect options
options.detach().sort(function(a,b) { // Detach from select, then Sort
var at = $(a).text();
var bt = $(b).text();
return (at > bt)?1:((at < bt)?-1:0); // Tell the sort function how to order
});
options.appendTo("#list"); // Re-attach to select
Я використовував розчин трацевіпіну, який діяв фантастично. Тут я надаю трохи змінену версію для всіх, як я, хто любить знаходити легко читабельний код і стискати його після того, як його зрозуміють. Я також використовував .detachзамість того, .removeщоб зберегти будь-які прив'язки до елементів DOM опції.
Ось моя вдосконалена версія рішення Pointy :
function sortSelectOptions(selector, skip_first) {
var options = (skip_first) ? $(selector + ' option:not(:first)') : $(selector + ' option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value, s: $(o).prop('selected') }; }).get();
arr.sort(function(o1, o2) {
var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each(function(i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
if (arr[i].s) {
$(o).attr('selected', 'selected').prop('selected', true);
} else {
$(o).removeAttr('selected');
$(o).prop('selected', false);
}
});
}
Функція має skip_first параметр, який корисний, коли ви хочете, щоб перший варіант був зверху, наприклад, коли він "вибирає нижче:".
Він також відстежує раніше обраний варіант.
Приклад використання:
jQuery(document).ready(function($) {
sortSelectOptions('#select-id', true);
});
Я знаю, що ця тема стара, але я думаю, що моя відповідь може бути корисною для багатьох людей.
Ось JQuery плагіна зроблений з загостреного відповіді «s з допомогою ES6:
/**
* Sort values alphabetically in select
* source: http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery
*/
$.fn.extend({
sortSelect() {
let options = this.find("option"),
arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort((o1, o2) => { // sort select
let t1 = o1.t.toLowerCase(),
t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each((i, o) => {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
}
});
Використовувати дуже просто
$("select").sortSelect();
Жодна з відповідей у мене не спрацювала. З якоїсь дивної причини під час перегляду параметрів кожен варіант нічого не повертає при text()виклику. Натомість я був змушений отримати ярлик опції черезattr('label')
/**
* Sort the options of the target select list
* alphabetically by label. For some reason, when
* we call detach(), the returned options have no
* text() and instead we're forced to get the option's
* label via the 'label' attribute.
* @param select jQuery selector
*/
function sort_multi_select(select) {
var options = select.find('option');
options.detach().sort(function (a, b) {
var at = $(a).attr('label'), //label, not text()
bt = $(b).attr('label');
return at > bt ? 1 : at < bt ? -1 : 0;
});
options.appendTo(select);
}
//example
sort_multi_select($('#my_select'));
Так, ви можете сортувати параметри за текстом і додавати назад до поля вибору.
function NASort(a, b) {
if (a.innerHTML == 'NA') {
return 1;
}
else if (b.innerHTML == 'NA') {
return -1;
}
return (a.innerHTML > b.innerHTML) ? 1 : -1;
};
Відповідь Malakgeorge приємна, і її можна легко перегорнути у функцію jQuery:
$.fn.sortSelectByText = function(){
this.each(function(){
var selected = $(this).val();
var opts_list = $(this).find('option');
opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
$(this).html('').append(opts_list);
$(this).val(selected);
})
return this;
}
Jquery.selectboxes.js плагін має метод сортування. Ви можете застосувати плагін або зануритися в код, щоб побачити спосіб сортування параметрів.
Я об’єднав частини чудових відповідей marxin та kuxa, щоб створити спеціальну функцію jQuery
сортує параметри за їх текстовими значеннями (без урахування регістру),
підтримує будь-яке вже вибране значення, і
повертає вихідні об'єкти jQuery, щодо яких виконується функція:
$.fn.extend({
sortSelect() {
return this.each(function(){
let $this = $(this),
original_selection = $this.val(),
$options = $this.find('option'),
arr = $options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort((o1, o2) => {
// sort select
let t1 = o1.t.toLowerCase(),
t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
$options.each((i, o) => {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
$this.val(original_selection);
})
}
});
Робочий приклад щодо jsFiddle доступний на https://jsfiddle.net/jhfrench/64och25e/ .