funciones - prompt javascript ejemplo

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

Question

Tengo jQuery, pero no estoy seguro si tiene algún asistente de clasificación incorporado. Podría hacer una 2da matriz del text , el value y las propiedades selected de cada elemento, pero no creo que los javascript integrados en Array.sort() funcionarían correctamente.

Answer 1

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

Answer 2

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?

Answer 3

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

Answer 4

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

La documentación de clasificación de Mozilla (específicamente la función comparar) y la página de Algoritmo de clasificación de Wikipedia son relevantes.

Si desea que el caso de clasificación no sea sensible, reemplace el 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 (consulte el algoritmo de intercalación Unicode ). El uso de localeCompare en la función de ordenamiento es una buena solución, por ejemplo:

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

Answer 5

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

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

A partir de un hilo de Grupos de Google , creo que acaba de pasar 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!

Answer 6

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

Answer 7

Recuerda: si quieres usar el selector de contexto, simplemente concatenar el ID no funcionará

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

Answer 8

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

Answer 9

Array.sort() predetermina convertir cada elemento en una cadena y comparar esos valores. Entonces ["value", "text", "selected"] se clasifica como "value, text, selected" . Lo cual probablemente funcionará bien, la mayoría de las veces.

Si desea ordenar solo el valor o interpretar el valor como un número, puede pasar una función de comparación a sort ():

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