Qual è il modo più efficiente per ordinare le opzioni di selezione Html in base al valore, preservando l'elemento attualmente selezionato?

Question

Ho jQuery ma non sono sicuro che abbia degli aiutanti di ordinamento integrati.Potrei creare un array 2D di ciascun elemento text, value, E selected proprietà, ma non penso che javascript sia integrato Array.sort() funzionerebbe correttamente.

Answer 1

Estrai le opzioni in un array temporaneo, ordina, quindi ricostruisci l'elenco:

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

La documentazione di ordinamento di Mozilla (in particolare la compareFunction) e Pagina Algoritmo di ordinamento di Wikipedia sono rilevanti.

Se vuoi che l'ordinamento non faccia distinzione tra maiuscole e minuscole, sostituisci text con text.toLowerCase()

La funzione di ordinamento mostrata sopra illustra come ordinare.Ordinare accuratamente le lingue diverse dall'inglese può essere complesso (vedere il file Algoritmo di confronto Unicode).Utilizzando localeCompare nella funzione sort è una buona soluzione, ad esempio:

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

Answer 2

Modificata leggermente la risposta di Tom sopra in modo che modifichi effettivamente il contenuto della casella di selezione da ordinare, anziché restituire semplicemente gli elementi ordinati.

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

Funzione jQuery:

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

Ho appena racchiuso l'idea di Mark in una funzione jquery

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

Funzione JQuery:

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

La soluzione che ho menzionato nel mio commento a @Juan Perez

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

Utilizzo:

$("select").sortOptions();

Questo può ancora essere migliorato, ma non ho bisogno di aggiungere altri campanelli o fischietti :)

Answer 5

C'è un ticket jQuery chiuso per un tipo che dovrebbe funzionare, ma semplicemente non è stato incluso nel nucleo.

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

Riferimento da un thread di Google Gruppi, penso che tu debba semplicemente passare una funzione che viene utilizzata per ordinare, in questo modo

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

Spero che sia d'aiuto!

Answer 6

Bene, in IE6 sembra essere ordinato in base all'elemento [0] dell'array nidificato:

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

Vedrò se funziona in altri browser...

Modificare:funziona anche con Firefox, woo hoo!

Esiste un modo più semplice di questo però?esiste un metodo integrato in Javascript o jQuery che ordina le selezioni che mi mancano o è questo il modo migliore?

Answer 7

Questa è una soluzione migliore.Dichiara una funzione globale in 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);
}

E chiama la funzione dal codice.

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

Answer 8

Array.sort() per impostazione predefinita converte ciascun elemento in una stringa e confronta tali valori.COSÌ ["value", "text", "selected"] viene ordinato come "value, text, selected".Il che probabilmente funzionerà bene, la maggior parte delle volte.

Se vuoi ordinare solo in base al valore o interpretare il valore come un numero, puoi passare una funzione di confronto in sort():

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

Answer 9

Ricordare:se desideri utilizzare il selettore di contesto, concatenare semplicemente l'ID non funzionerà

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