현재 선택된 항목을 유지하면서 Html Select의 옵션을 값별로 정렬하는 가장 효율적인 방법은 무엇입니까?
-
09-06-2019 - |
문제
jQuery가 있지만 내장된 정렬 도우미가 있는지 확실하지 않습니다.각 항목의 2D 배열을 만들 수 있습니다. text
, value
, 그리고 selected
속성이 있지만 자바스크립트가 내장되어 있지 않은 것 같습니다. 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()
위에 표시된 정렬 기능은 정렬 방법을 보여줍니다.영어가 아닌 언어를 정확하게 정렬하는 것은 복잡할 수 있습니다( 유니코드 대조 알고리즘).사용 로케일비교 정렬 기능에 좋은 해결책이 있습니다. 예:
my_options.sort(function(a,b) {
return a.text.localeCompare(b.text);
});
다른 팁
정렬된 요소를 반환하는 대신 실제로 정렬할 선택 상자의 내용을 수정하도록 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();
이는 여전히 개선될 수 있지만 더 이상 추가 기능을 추가할 필요는 없습니다. :)
있다 종료된 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;
});
}
도움이 되길 바랍니다!
글쎄요, 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에서도 작동합니다. 우후!
그런데 이보다 더 쉬운 방법이 있을까요?내가 누락한 선택 항목을 정렬하는 javascript 또는 jQuery에 내장된 메서드가 있습니까, 아니면 이것이 가장 좋은 방법입니까?
이것이 더 나은 솔루션입니다.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();
Array.sort()
기본적으로 각 요소를 문자열로 변환하고 해당 값을 비교합니다.그래서 ["value", "text", "selected"]
다음과 같이 정렬됩니다. "value, text, selected"
.대부분의 경우에는 잘 작동할 것입니다.
값만을 기준으로 정렬하거나 값을 숫자로 해석하려면 sort()에 비교 함수를 전달할 수 있습니다.
arrOptions.sort(function(a,b) { return new Number(a[0]) - new Number(b[0]); });
기억하다:컨텍스트 선택기를 사용하려면 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();