Sortieren von Optionselementen alphabetisch mit jQuery

Ich versuche, das Sortieren von optionElementen innerhalb eines selectElements alphabetisch zu verstehen . Idealerweise möchte ich dies als separate Funktion haben, bei der ich das Auswahlelement einfach übergeben kann, da es sortiert werden muss, wenn der Benutzer auf einige Schaltflächen klickt.

Ich habe hoch und niedrig nach einem guten Weg gesucht, aber ich konnte nichts finden, was für mich funktioniert hat.

Die Optionselemente sollten alphabetisch nach Text und nicht nach Wert sortiert sein.

Ist das irgendwie möglich?

Was ich tun würde ist:

1. Extrahieren Sie den Text und den Wert jedes <option>Objekts in ein Array von Objekten.
2. Sortieren Sie das Array.
3. Aktualisieren Sie die <option>Elemente mit dem Array-Inhalt der Reihe nach.

Um dies mit jQuery zu tun, können Sie Folgendes tun:

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

Hier ist eine funktionierende jsfiddle.

Bearbeiten - Wenn Sie so sortieren möchten, dass Sie die alphabetische Groß- und Kleinschreibung ignorieren, können Sie vor dem Vergleich JavaScript .toUpperCase()oder .toLowerCase()Funktionen verwenden:

arr.sort(function(o1, o2) {
  var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();

  return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});

Die akzeptierte Antwort ist nicht in allen Fällen die beste, da Sie manchmal Klassen von Optionen und verschiedene Argumente (z. B. data-foo) beibehalten möchten.

Meine Lösung ist:

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

// Für ie11 oder diejenigen, die leere Optionen erhalten, ersetzen Sie html ('') empty ()

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

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

Ich habe Tracevipins Lösung verwendet, die fantastisch funktioniert hat. Ich biete hier eine leicht modifizierte Version für alle wie mich an, die leicht lesbaren Code finden und komprimieren möchten, nachdem er verstanden wurde. Ich habe auch verwendet, .detachanstatt .removeBindungen für die Option DOM-Elemente beizubehalten.

Hier ist meine verbesserte Version von Pointys Lösung :

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

Die Funktion verfügt über den skip_firstParameter, der nützlich ist, wenn Sie die erste Option oben behalten möchten, z. B. wenn Sie "unten wählen:".

Außerdem wird die zuvor ausgewählte Option verfolgt.

Anwendungsbeispiel:

jQuery(document).ready(function($) {

  sortSelectOptions('#select-id', true);

});

Ich weiß, dass dieses Thema alt ist, aber ich denke, meine Antwort kann für viele Menschen nützlich sein.

Hier ist das jQuery-Plugin, das aus Pointys Antwort mit ES6 erstellt wurde:

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

Die Bedienung ist sehr einfach

$("select").sortSelect();

Keine der Antworten hat bei mir funktioniert. Aus irgendeinem seltsamen Grund gibt jede Option beim Durchlaufen der Optionen nichts zurück, wenn sie text()aufgerufen wird. Stattdessen musste ich das Etikett der Option über abrufenattr('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'));

Ja, Sie können die Optionen nach ihrem Text sortieren und wieder an das Auswahlfeld anhängen.

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

Geige: https://jsfiddle.net/vaishali_ravisankar/5zfohf6v/

Die Antwort von Malakgeorge ist nett und kann leicht in eine jQuery-Funktion eingebunden werden:

$.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;        
}

Das Plugin jquery.selectboxes.js verfügt über eine Sortiermethode . Sie können das Plugin implementieren oder in den Code eintauchen, um eine Möglichkeit zum Sortieren der Optionen zu finden.

Ich habe Teile aus den hervorragenden Antworten von Marxin und Kuxa kombiniert , um eine benutzerdefinierte jQuery-Funktion zu erstellen, die

1. sortiert die Optionen nach ihren Textwerten (ohne Berücksichtigung der Groß- und Kleinschreibung),

2. behält jeden bereits ausgewählten Wert bei, und

3. Gibt die ursprünglichen jQuery-Objekte zurück, für die die Funktion ausgeführt wird:

   $.fn.extend({
       sortSelect() {
           return this.each(function(){
               let $this = $(this),
                   original_selection = $this.val(),
                   $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);
               });
   
               $this.val(original_selection); 
           })
       }
   });
   

Ein Arbeitsbeispiel für jsFiddle finden Sie unter https://jsfiddle.net/jhfrench/64och25e/ .