현재 선택한 항목을 보존하면서 HTML 선택 옵션을 값별로 정렬하는 가장 효율적인 방법은 무엇입니까?

현재 선택한 항목을 보존하면서 HTML 선택 옵션을 값별로 정렬하는 가장 효율적인 방법은 무엇입니까?

jQuery를 가지고 있는데, sorting helper가 내장되어 있습니다.나는 각 아이템의 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)와 위키피디아의 정렬 알고리즘 페이지가 해당됩니다.

정렬 대소문자를 둔감하게 만들고 싶다면 대체text와 함께text.toLowerCase()

위에 표시된 정렬 기능은 정렬하는 방법을 보여줍니다.영어 이외의 언어를 정확하게 정렬하는 것은 복잡할 수 있습니다(유니코드 대조 알고리즘 참조).정렬 함수에서 localCompare를 사용하는 것이 좋은 해결책입니다.

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

방금 마크의 아이디어를 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];
    }
}

다른 브라우저에서도 작동하는지 알아보겠습니다.

편집: 파이어폭스에서도 작동합니다, 우후!

이것보다 더 쉬운 방법이 있습니까?javascript나 jQuery에 내장된 method 중에 내가 놓친 것을 선별하는 방법이 있습니까, 아니면 이것이 최선의 방법입니까?

작동해야 하는 종류의 폐쇄된 jQuery 티켓이 있지만 핵심에 포함되지 않았습니다.

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

구글 그룹 스레드를 참조하면 정렬에 사용되는 함수를 그냥 전달하는 것 같습니다.

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

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

조금 늦었지만, 가치가 있기 때문에 일반적으로 포함할 수 있는 더 복잡한 기능을 구현했습니다.다양한 출력을 위한 몇 가지 옵션이 있습니다. 재발할 .<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()n에 합니다.<SELECT>그 ,<OPTGROUP>그룹의 옵션만 정렬할 수 있습니다.

예:

$('select').sortSelect();

"역순" 옵션을 사용하여 순서를 바꿉니다.

$('select').sortSelect({
    reverse: true
});

다음과 같은 중요 클래스(예: "js-sort")를 포함하는 경우에만 모든 선택 항목에 자동으로 적용할 수 있습니다.

$('select.js-sort').each(function(k, v){
    $(v).sortSelect();
});

jquery는 html 선택 요소에서 옵션을 정렬하는 데 아직도 충분히 도움이 되지 않는 것 같습니다.정렬 옵션을 위한 일반 자바스크립트 코드는 다음과 같습니다.

function sortOptionsByText(a,b) {
  // I keep an empty value option on top, b.value comparison to 0 might not be necessary if empty value is always on top...
  if (a.value.length==0 || (b.value.length>0 && a.text <= b.text)) return -1; // no sort: a, b
  return 1; // sort switches places: b, a
}
function sortOptionsByValue(a,b) {
  if (a.value <= b.value) return -1; // a, b
  return 1; // b, a
}
function clearChildren(elem) {
  if (elem) {
    while (elem.firstChild) {
      elem.removeChild(elem.firstChild);
    }
  }
}
function sortSelectElem(sel,byText) {
  const val=sel.value;
  const tmp=[...sel.options];
  tmp.sort(byText?sortOptionsByText:sortOptionsByValue);
  clearChildren(sel);
  sel.append(...tmp);
  sel.value=val;
}

RACE: <select id="list" size="6">
  <option value="">--PICK ONE--</option>
  <option value="1">HUMANOID</option>
  <option value="2">AMPHIBIAN</option>
  <option value="3">REPTILE</option>
  <option value="4">INSECTOID</option>
</select><br>
<button type="button" onclick="sortSelectElem(document.getElementById('list'));">SORT LIST BY VALUE</button><br>
<button type="button" onclick="sortSelectElem(document.getElementById('list'),true);">SORT LIST BY TEXT</button>

jquery와 함께 이것은 Chrome에서 데이터베이스 정렬되지 않은 요소에서 선택한 것을 정렬하는 데 효과가 있었습니다.

$(document).ready(function(){
    
    var $list = $("#my_select");
    var selected = $("#my_select").val(); //save selected value
    
    $list.children().detach().sort(function(a, b) {
        return $(a).text().localeCompare($(b).text());
      }).appendTo($list);  //do the sorting locale for latin chars
    
    $("#my_select").val(selected); //select previous selected value

});

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