Was ist der effizienteste Weg, die Optionen einer HTML-Auswahl nach Wert zu sortieren und gleichzeitig das aktuell ausgewählte Element beizubehalten?

Question

Ich habe jQuery, bin mir aber nicht sicher, ob es integrierte Sortierhilfen hat.Ich könnte aus jedem Element ein 2D-Array erstellen text, value, Und selected Eigenschaften, aber ich glaube nicht, dass Javascript eingebaut ist Array.sort() würde richtig funktionieren.

Answer 1

Extrahieren Sie Optionen in ein temporäres Array, sortieren Sie sie und erstellen Sie dann die Liste neu:

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

Mozillas Sortierdokumentation (insbesondere die CompareFunction) und Wikipedia-Seite zum Sortieralgorithmus sind relevant.

Wenn Sie die Groß-/Kleinschreibung beim Sortieren nicht berücksichtigen möchten, ersetzen Sie text mit text.toLowerCase()

Die oben gezeigte Sortierfunktion veranschaulicht, wie sortiert wird.Das genaue Sortieren nicht-englischer Sprachen kann komplex sein (siehe Unicode-Sortierungsalgorithmus).Benutzen localeCompare in der Sortierfunktion ist eine gute Lösung, zB:

my_options.sort(function(a,b) {
    return a.text.localeCompare(b.text);
});

Answer 2

Toms Antwort oben wurde leicht geändert, sodass tatsächlich der Inhalt des zu sortierenden Auswahlfelds geändert wird, anstatt nur die sortierten Elemente zurückzugeben.

$('#your_select_box').sort_select_box();

jQuery-Funktion:

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

Answer 3

Ich habe Marks Idee gerade in eine JQuery-Funktion verpackt

$('#your_select_box').sort_select_box();

JQuery-Funktion:

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

Answer 4

Die Lösung, die ich in meinem Kommentar an @Juan Perez erwähnt habe

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

Verwendung:

$("select").sortOptions();

Das lässt sich noch verbessern, aber ich musste keinen weiteren Schnickschnack hinzufügen :)

Answer 5

Es gibt ein geschlossenes jQuery-Ticket für eine Sortierung, die funktionieren sollte, aber einfach nicht im Kern enthalten war.

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

Referenziert von ein Google Groups-Thread, ich denke, Sie übergeben einfach eine Funktion, die zum Sortieren verwendet wird, so

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

Ich hoffe es hilft!

Answer 6

Nun, in IE6 scheint es nach dem [0]-Element des verschachtelten Arrays zu sortieren:

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

Ich werde sehen, ob das in anderen Browsern funktioniert ...

Bearbeiten:Es funktioniert auch in Firefox, woo hoo!

Gibt es einen einfacheren Weg als diesen?Gibt es eine in Javascript oder jQuery integrierte Methode, die die fehlenden Auswahlen sortiert, oder ist dies der beste Weg?

Answer 7

Dies ist eine bessere Lösung.Deklarieren Sie eine globale Funktion für 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);
}

Und rufen Sie die Funktion aus dem Code auf.

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

Answer 8

Array.sort() Standardmäßig wird jedes Element in eine Zeichenfolge konvertiert und diese Werte verglichen.Also ["value", "text", "selected"] wird sortiert als "value, text, selected".Was wahrscheinlich meistens gut funktionieren wird.

Wenn Sie nur nach dem Wert sortieren oder den Wert als Zahl interpretieren möchten, können Sie eine Vergleichsfunktion an sort() übergeben:

arrOptions.sort(function(a,b) { return new Number(a[0]) - new Number(b[0]); });

Answer 9

Erinnern:Wenn Sie die Kontextauswahl verwenden möchten, funktioniert das einfache Verketten der ID nicht

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