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

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

해결법

1. ---

   1.내가 할 줄 것은 :

   내가 할 줄 것은 :

   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이다.

   편집 - 당신이 알파벳 케이스를 무시하도록 정렬 할 경우 비교하기 전에 자바 스크립트 .toUpperCase () 또는 .toLowerCase () 함수를 사용할 수 있습니다 :

   arr.sort(function(o1, o2) {
     var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
   
     return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
   });
   

2. ---

   2.때때로 당신은 옵션과 (예를 들어, 데이터 foo에 대한) 다른 인수의 클래스를 유지하기를 원하기 때문에 허용 대답은 모든 경우에 가장 좋은하지 않습니다.

   때때로 당신은 옵션과 (예를 들어, 데이터 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을 ( '') 대신 ()

3. ---

   3.

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

4. ---

   4.

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

   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 요소에 어떤 바인딩을 유지하기 위해 .remove 대신 .detach 사용했습니다.

5. ---

   5.여기에 뾰족한의 솔루션 내 개선 된 버전입니다 :

   여기에 뾰족한의 솔루션 내 개선 된 버전입니다 :

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

6. ---

   6.이 주제는 오래 알고 있지만 내 대답은 많은 사람들이 유용 할 수 있다고 생각합니다.

   이 주제는 오래 알고 있지만 내 대답은 많은 사람들이 유용 할 수 있다고 생각합니다.

   여기에 jQuery를이 ES6를 사용하여 뾰족한의 대답 만든 플러그인입니다 :

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

7. ---

   7.답변 아무도 나를 위해 일하지 않는다. 옵션을 통해 반복 할 때 텍스트 ()가 호출 될 때 어떤 이상한 이유로, 각 옵션은 아무 것도 반환하지 않습니다. 대신, 내가 ATTR를 통해 옵션의 라벨을 검색하도록 강요했다 ( '라벨')

   답변 아무도 나를 위해 일하지 않는다. 옵션을 통해 반복 할 때 텍스트 ()가 호출 될 때 어떤 이상한 이유로, 각 옵션은 아무 것도 반환하지 않습니다. 대신, 내가 ATTR를 통해 옵션의 라벨을 검색하도록 강요했다 ( '라벨')

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

8. ---

   8.예는 텍스트로 옵션을 정렬하고 다시 선택 상자를 추가 할 수 있습니다.

   예는 텍스트로 옵션을 정렬하고 다시 선택 상자를 추가 할 수 있습니다.

    function NASort(a, b) {    
         if (a.innerHTML == 'NA') {
             return 1;   
         }
         else if (b.innerHTML == 'NA') {
             return -1;   
         }       
         return (a.innerHTML > b.innerHTML) ? 1 : -1;
     };
   

   깡깡이: https://jsfiddle.net/vaishali_ravisankar/5zfohf6v/

9. ---

   9.Malakgeorge 대답은 좋은 쉽게 jQuery를 기능에 랩 할 수 있습니다 :

   Malakgeorge 대답은 좋은 쉽게 jQuery를 기능에 랩 할 수 있습니다 :

   $.fn.sortSelectByText = function(){
       this.each(function(){
           var selected = $(this).val(); 
           var opts_list = $(this).find('option');
           opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
           $(this).html('').append(opts_list);
           $(this).val(selected); 
       })
       return this;        
   }
   

10. ---

    10.jquery.selectboxes.js 플러그인은 정렬 방법이있다. 당신은 옵션을 정렬하는 방법을 볼 수있는 코드로 플러그인, 또는 다이빙을 구현할 수 있습니다.

    jquery.selectboxes.js 플러그인은 정렬 방법이있다. 당신은 옵션을 정렬하는 방법을 볼 수있는 코드로 플러그인, 또는 다이빙을 구현할 수 있습니다.

11. ---

    11.I marxin의 및 kuxa의 훌륭한 답변에서 결합 부분은 jQuery를 사용자 지정 기능이를 만들려면

    I marxin의 및 kuxa의 훌륭한 답변에서 결합 부분은 jQuery를 사용자 지정 기능이를 만들려면

    jsFiddle에 예를 작업 https://jsfiddle.net/jhfrench/64och25e/에서 확인할 수있다.

from https://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery by cc-by-sa and MIT license