[javascript] jQuery를 사용하여 옵션 요소를 알파벳순으로 정렬

Question 1

option요소 내에서 select요소를 알파벳순으로 정렬하는 것을 이해하려고합니다 . 이상적으로는 사용자가 일부 버튼을 클릭 할 때 정렬해야하기 때문에 select 요소를 전달할 수있는 별도의 함수로 사용하고 싶습니다.

나는 이것을하는 좋은 방법을 찾기 위해 높고 낮은 것을 검색했지만 나를 위해 일하는 것을 찾을 수 없었습니다.

옵션 요소는 값이 아닌 텍스트를 기준으로 알파벳순으로 정렬되어야합니다.

어떤 식 으로든 가능합니까?

Question 2

내가 할 일은 :

각각의 텍스트와 값 <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);
});

다음은 작동하는 jsfiddle입니다.

편집 — 알파벳 대소 문자를 무시하도록 정렬하려면 비교하기 전에 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;
});

Question 3

때로는 옵션 클래스와 다른 인수 (예 : 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 ()

Question 4

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

Question 5

html :

<select id="list">
    <option value="op3">option 3</option>
    <option value="op1">option 1</option>
    <option value="op2">option 2</option>
</select>

jQuery :

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

환상적으로 작동하는 tracevipin의 솔루션을 사용했습니다. 나는 쉽게 읽을 수있는 코드를 찾는 것을 좋아하는 나와 같은 사람을 위해 약간 수정 된 버전을 제공하고 이해 한 후에 압축합니다 . 또한 옵션 DOM 요소에 대한 바인딩을 유지 하는 .detach대신 사용 했습니다 .remove.

Question 6

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

});

Question 7

나는이 주제가 오래되었다는 것을 알고 있지만 내 대답은 많은 사람들에게 유용 할 것이라고 생각합니다.

다음은 ES6를 사용하여 Pointy 의 답변으로 만든 jQuery 플러그인입니다 .

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

Question 8

대답 중 어느 것도 나를 위해 일하지 않았습니다. 이상한 이유로 옵션을 반복 할 때 각 옵션 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'));