Quel est le moyen le plus efficace pour trier Html, Sélectionnez les Options de la valeur, tout en préservant l'élément actuellement sélectionné?

Question

J'ai jQuery mais je ne suis pas sûr si elle a tout intégré dans le tri des aides.Je pourrais faire un tableau 2d de chaque élément text, value, et selected propriétés, mais je ne pense pas que javascript intégré dans Array.sort() ne fonctionnera pas correctement.

Answer 1

Extrait des options dans un tableau temporaire, de les trier, puis de reconstruire la liste:

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

Mozilla est une sorte de documentation (plus précisément, le compareFunction) et Wikipedia Algorithme de Tri de la page sont pertinentes.

Si vous voulez faire le tri insensible à la casse, remplacer text avec text.toLowerCase()

La fonction de tri indiqué ci-dessus illustre comment trier.Le tri des langues autres que l'anglais de manière précise peut être complexe (voir le unicode collation algorithm).À l'aide de localeCompare dans la fonction de tri est une bonne solution, par exemple:

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

Answer 2

Modifié Tom réponse ci-dessus légèrement, de sorte qu'en fait, il modifie le contenu de la zone de sélection pour être triés, plutôt que de simplement retourner les éléments triés.

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

fonction 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

J'ai juste enveloppé Marque à l'idée dans une fonction jquery

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

Fonction 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 solution je l'ai mentionné dans mon commentaire de @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);
    });
}

Utilisation:

$("select").sortOptions();

Cela peut encore être amélioré, mais je n'ai pas besoin d'ajouter plus de cloches et de sifflets :)

Answer 5

Il y a fermé jQuery billet pour un tri de ce que devrait fonctionner, mais n'était tout simplement pas inclus dans le noyau.

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

Référencé d' Google Groupes thread, Je pense que vous venez de passer dans une fonction qui est utilisée pour le tri, comme

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

Espérons que cela aide!

Answer 6

Eh bien, dans IE6, il semble tri sur le tableau imbriqué s [0] point:

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

Je vais voir si cela fonctionne dans d'autres navigateurs...

Edit:il fonctionne dans Firefox aussi, woo hoo!

Est-il un moyen plus simple que cela?est-il une méthode construite en javascript ou jQuery qui trie sélectionne que je suis absent, ou est-ce la meilleure façon de faire?

Answer 7

C'est une meilleure solution.Déclarer une fonction globale de 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);
}

Et l'appel de la fonction dans le code.

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

Answer 8

Array.sort() les valeurs par défaut pour la conversion de chaque élément d'une chaîne de caractères, et en comparant ces valeurs.Donc ["value", "text", "selected"] soit trié comme "value, text, selected".Qui sera probablement bien fonctionner, la plupart du temps.

Si vous ne souhaitez trier sur soi, ou d'interpréter la valeur comme un nombre, alors vous pouvez passer d'une fonction de comparaison en sort():

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

Answer 9

Souvenez-vous:si vous souhaitez utiliser le sélecteur de contexte, juste concaténer l'IDENTIFIANT ne fonctionne pas

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