javascript - form - Was ist der effizienteste Weg, die Optionen von Html Select nach Wert zu sortieren, während das aktuell ausgewählte Element beibehalten wird?




javascript set selected option (6)

Ich habe jQuery, aber ich bin nicht sicher, ob es eingebaute Sortierhelfer hat. Ich könnte ein 2d-Array von jedem Artikel text , value und selected Eigenschaften machen, aber ich glaube nicht, dass Javascript eingebaute Array.sort() würde richtig funktionieren.


Denken Sie daran: Wenn Sie den Kontext-Selektor verwenden möchten, verketten Sie die ID einfach 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();

Die Lösung, die ich in meinem Kommentar zu @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();

Dies kann noch verbessert werden, aber ich musste keine Glocken oder Pfeifen mehr hinzufügen :)


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 rufe die Funktion aus dem Code auf.

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

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

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

Aus einem Google Groups-Thread referenziert, denke ich, dass Sie einfach eine Funktion übergeben, die zum Sortieren verwendet wird

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

Ich hoffe es hilft!


Ich habe Marks Idee 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;
}

Nun, in IE6 scheint es nach dem Element [0] 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 ...

Edit: Es funktioniert auch in Firefox, woo hoo!

Gibt es einen einfacheren Weg als das? Gibt es eine Methode, die in Javascript oder jQuery eingebaut ist, die Sortierungen auswählt, die ich vermisse, oder ist das der beste Weg?







html-select