Pregunta ¿Cuál es la forma más eficiente de ordenar las Opciones de selección de HTML por valor, conservando el elemento seleccionado actualmente?


Tengo jQuery, pero no estoy seguro si tiene algún asistente de clasificación incorporado. Podría hacer un 2d conjunto de cada elemento text, valuey selected propiedades, pero no creo que javascript esté integrado Array.sort() funcionaría correctamente


73
2017-09-05 14:05


origen


Respuestas:


Extraiga las opciones en una matriz temporal, ordene y luego reconstruya la lista:

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

Documentación de género de Mozilla (específicamente la función comparar) y Página de Algoritmo de clasificación de Wikipedia es relevante.

Si desea que el caso de clasificación no sea sensible, reemplace text con text.toLowerCase()

La función de ordenamiento que se muestra arriba ilustra cómo ordenar. La clasificación de idiomas no ingleses con precisión puede ser compleja (ver algoritmo de intercalación unicode) Utilizando localeCompare en la función de clasificación es una buena solución, por ejemplo:

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

127
2017-12-11 01:51



Se modificó ligeramente la respuesta de Tom para que realmente modifique el contenido del cuadro de selección que se va a ordenar, en lugar de solo devolver los elementos ordenados.

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

Función 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);
}

19
2018-03-25 13:01



Acabo de envolver la idea de Mark en una función jquery

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

Función 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;
}

17
2018-01-20 10:14



La solución que mencioné en mi comentario 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);
    });
}

Uso:

$("select").sortOptions();

Esto todavía se puede mejorar, pero no necesité agregar más campanas o silbatos :)


12
2017-09-06 19:26



Hay un boleto jQuery cerrado para un tipo que debería funcionar, pero simplemente no estaba incluido en el núcleo.

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

Referenciado de un hilo de Grupos de Google, Creo que solo pasas una función que se usa para ordenar, como

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

¡Espero eso ayude!


6
2017-09-05 14:52



Bueno, en IE6 parece ordenar en el elemento [0] del conjunto anidado:

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

Veré si esto funciona en otros navegadores ...

Editar: también funciona en Firefox, woo hoo!

¿Hay una manera más fácil que esto sin embargo? ¿Hay algún método incorporado en javascript o jQuery que clasifique las selecciones que me faltan, o es esta la mejor manera?


5
2017-09-05 14:06



Esta es una mejor solución. Declarar una función global a 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);
}

Y llama a la función desde el código.

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

4
2018-06-25 19:32