jQuery가 있지만 내장 정렬 도우미가 있는지 확실하지 않습니다. 각 항목의 text, value및 selected속성에 대한 2d 배열을 만들 수는 있지만 javascript가 내장되어 Array.sort()제대로 작동 하지 않을 것이라고 생각 합니다.
답변:
옵션을 임시 배열로 추출하고 정렬 한 다음 목록을 다시 작성합니다.
var my_options = $("#my_select option");
var selected = $("#my_select").val();
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
if (a.text < b.text) return -1;
return 0
})
$("#my_select").empty().append( my_options );
$("#my_select").val(selected);
Mozilla의 정렬 문서 (특히 compareFunction)와 Wikipedia의 정렬 알고리즘 페이지 는 관련이 있습니다.
정렬 대소 문자를 구분하지 않으려면 다음으로 바꾸십시오 text.text.toLowerCase()
위에 표시된 정렬 기능은 정렬 방법을 보여줍니다. 영어가 아닌 언어를 정확하게 정렬하는 것은 복잡 할 수 있습니다 ( 유니 코드 데이터 정렬 알고리즘 참조 ). 정렬 함수에서 localeCompare 를 사용 하는 것이 좋은 해결책입니다. 예 :
my_options.sort(function(a,b) {
return a.text.localeCompare(b.text);
});
.toUpperCase()각 후.text
var selected = $("#my_select").val(); 정렬 된 옵션이 추가 된 후 val을 복원합니다. 즉$("#my_select").val(selected);
.toUpperCase()대 .toLowerCase()무시하는 경우 때 stackoverflow.com/questions/2140627/...
정렬 된 요소를 반환하는 대신 정렬 할 선택 상자의 내용을 실제로 수정하도록 Tom의 대답을 약간 수정했습니다.
$('#your_select_box').sort_select_box();
jQuery 함수 :
$.fn.sort_select_box = function(){
// Get options from select box
var my_options = $("#" + this.attr('id') + ' option');
// sort alphabetically
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
else return 0
})
//replace with sorted my_options;
$(this).empty().append( my_options );
// clearing any selections
$("#"+this.attr('id')+" option").attr('selected', false);
}
Mark의 아이디어를 jquery 함수로 래핑했습니다.
$('#your_select_box').sort_select_box();
JQuery 함수 :
$.fn.sort_select_box = function(){
var my_options = $("#" + this.attr('id') + ' option');
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
else return 0
})
return my_options;
}
@Juan Perez에 대한 내 의견에서 언급 한 솔루션
$.fn.sortOptions = function(){
$(this).each(function(){
var op = $(this).children("option");
op.sort(function(a, b) {
return a.text > b.text ? 1 : -1;
})
return $(this).empty().append(op);
});
}
용법:
$("select").sortOptions();
이것은 여전히 개선 될 수 있지만 더 이상 종이나 휘파람을 추가 할 필요가 없습니다. :)
음, IE6에서는 중첩 배열의 [0] 항목을 기준으로 정렬하는 것 같습니다.
function sortSelect(selectToSort) {
var arrOptions = [];
for (var i = 0; i < selectToSort.options.length; i++) {
arrOptions[i] = [];
arrOptions[i][0] = selectToSort.options[i].value;
arrOptions[i][1] = selectToSort.options[i].text;
arrOptions[i][2] = selectToSort.options[i].selected;
}
arrOptions.sort();
for (var i = 0; i < selectToSort.options.length; i++) {
selectToSort.options[i].value = arrOptions[i][0];
selectToSort.options[i].text = arrOptions[i][1];
selectToSort.options[i].selected = arrOptions[i][2];
}
}
다른 브라우저에서도 작동하는지 확인하겠습니다.
편집 : Firefox에서도 작동합니다, 우후!
그래도 이것보다 쉬운 방법이 있습니까? 내가 놓친 선택을 정렬하는 자바 스크립트 또는 jQuery에 내장 된 방법이 있습니까? 아니면 이것이 가장 좋은 방법입니까?
거기에 폐쇄 jQuery를 티켓 작동합니다 일종의에 대한,하지만 단지의 핵심에 포함되지 않았습니다.
jQuery.fn.sort = function() {
return this.pushStack( [].sort.apply( this, arguments ), []);
};
Google 그룹스 스레드 에서 참조 하면 정렬에 사용되는 함수를 다음과 같이 전달하는 것 같습니다.
function sortSelect(selectToSort) {
jQuery(selectToSort.options).sort(function(a,b){
return a.value > b.value ? 1 : -1;
});
}
도움이 되었기를 바랍니다.
이것이 더 나은 해결책입니다. JQuery에 전역 함수 선언
$.fn.sortSelect = function() {
var op = this.children("option");
op.sort(function(a, b) {
return a.text > b.text ? 1 : -1;
})
return this.empty().append(op);
}
그리고 코드에서 함수를 호출하십시오.
$("#my_select").sortSelect();
$(this)대신 사용해야 합니다this
기억하세요 : 컨텍스트 선택기를 사용하려면 ID를 연결하면 작동하지 않습니다.
$.fn.sort_select_box = function(){
var my_options = $("option", $(this));
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
else return 0
});
$(this).empty().append(my_options);
}
// Usando:
$("select#ProdutoFornecedorId", $($context)).sort_select_box();
조금 늦었지만 더 복잡한 기능을 구현 한 것이 가치가 있기 때문에 일반적으로 포함시킬 수 있습니다. 다양한 출력을위한 몇 가지 옵션이 있습니다. 또한 <OPTGROUP>레이블을 기반 으로 태그 로 재귀 할 수도 있습니다 .
$.fn.sortSelect = function(options){
const OPTIONS_DEFAULT = {
recursive: true, // Recurse into <optgroup>
reverse: false, // Reverse order
useValues: false, // Use values instead of text for <option> (<optgruop> is always label based)
blankFirst: true, // Force placeholder <option> with empty value first, ignores reverse
}
if (typeof options != "object" || null === options) {
options = OPTIONS_DEFAULT;
}
var sortOptions = function($root, $node, options){
if ($node.length != 1) {
return false;
}
if ($node[0].tagName != "SELECT" && $node[0].tagName != "OPTGROUP") {
return false;
}
if (options.recursive) {
$node.children('optgroup').each(function(k, v){
return sortOptions($root, $(v), options);
});
}
var $options = $node.children('option, optgroup');
var $optionsSorted = $options.sort(function(a, b){
if (options.blankFirst) {
if (a.tagName == "OPTION" && a.value == "") {
return -1;
}
if (b.tagName == "OPTION" && b.value == "") {
return 1;
}
}
var textA = (a.tagName == "OPTION" ? (options.useValues ? a.value : a.text) : a.label);
var textB = (b.tagName == "OPTION" ? (options.useValues ? a.value : b.text) : b.label);
if (textA > textB) {
return options.reverse ? -1 : 1;
}
if (textA < textB) {
return options.reverse ? 1 : -1;
}
return 0;
});
$options.remove();
$optionsSorted.appendTo($node);
return true;
};
var selected = $(this).val();
var sorted = sortOptions($(this), $(this), {...OPTIONS_DEFAULT, ...options});
$(this).val(selected);
return sorted;
};
그런 다음 sortSelect()모든 <SELECT>태그 에서 함수 를 호출 하거나 <OPTGROUP>그룹 옵션 만 정렬하려면 단일 함수 를 호출 할 수 있습니다.
예:
$('select').sortSelect();
"reverse"옵션을 사용하여 역순 :
$('select').sortSelect({
reverse: true
});
모든 선택에 자동으로 적용 할 수 있습니다. 아마도 다음과 같이 중요한 클래스 (예 : "js-sort")를 포함하는 경우에만 가능합니다.
$('select.js-sort').each(function(k, v){
$(v).sortSelect();
});