현재 선택된 항목을 유지하면서 Html Select의 옵션을 값별로 정렬하는 가장 효율적인 방법은 무엇입니까?

현재 선택된 항목을 유지하면서 Html Select의 옵션을 값별로 정렬하는 가장 효율적인 방법은 무엇입니까?

---

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

---

정렬 된 요소를 반환하는 대신 정렬 할 선택 상자의 내용을 실제로 수정하도록 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에서도 작동합니다, 우후!

Is there an easier way than this though? is there some method built into javascript or jQuery that sorts selects that I am missing, or is this the best way?

---

There's a closed jQuery ticket for a sort that should work, but just wasn't included in the core.

jQuery.fn.sort = function() {
  return this.pushStack( [].sort.apply( this, arguments ), []);
};

Referenced from a Google Groups thread, I think you just pass in a function that is used to sort, like so

function sortSelect(selectToSort) {
    jQuery(selectToSort.options).sort(function(a,b){ 
        return a.value > b.value ? 1 : -1; 
    });
}

Hope it helps!

---

This is a better solution. Declare a global function to 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);
}

And call the function from the code.

$("#my_select").sortSelect();

---

Array.sort() defaults to converting each element to a string, and comparing those values. So ["value", "text", "selected"] gets sorted as "value, text, selected". Which will probably work fine, most of the time.

If you do want to sort on value alone, or interpret value as a number, then you can pass a comparison function into 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();

참고 URL : https://stackoverflow.com/questions/45888/what-is-the-most-efficient-way-to-sort-an-html-selects-options-by-value-while