Tri Sélectionner une boîte avec jQuery

J'ai un select case sur un formulaire, qui porte un différentiel, l'attribut rel.
J'ai une fonction qui permet de trier les options par thier .texte() la valeur, en alphabetcal commande.

Ma question est, avec jQuery, comment puis-je trier en ordre croissant à l'aide de l'attribut rel ?

<option rel="1" value="ASHCHRC">Ashchurch for Tewkesbury </option>
<option rel="2" value="EVESHAM">Evesham </option>
<option rel="3" value="CHLTNHM">Cheltenham Spa </option>
<option rel="4" value="PERSHOR">Pershore </option>
<option rel="5" value="HONYBRN">Honeybourne </option>
<option rel="6" value="MINMARS">Moreton-in-Marsh </option>
<option rel="7" value="GLOSTER">Gloucester </option>
<option rel="8" value="GTMLVRN">Great Malvern </option>
<option rel="9" value="MLVRNLK">Malvern Link </option>

ma fonction de tri: var objet; peut-être l'une des nombreuses listes de sélection dans le formulaire.

$(object).each(function() {

    //Keep track of the selected option.
    var selectedValue = $(this).val();

    //sort it out
    $(this).html($("option", $(this)).sort(function(a, b) { 
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 
    }));

    //Select one option.
    $(this).val(selectedValue);

});

source d'informationauteur Deano

  1. 8

    Si vous souhaitez trier par rel, vous devriez changer votre fonction

    $(this).html($("option", $(this)).sort(function(a, b) { 
    var arel = $(a).attr('rel');
    var brel = $(b).attr('rel');
    return arel == brel ? 0 : arel < brel ? -1 : 1 
}));

    modifier avec parseInt()

    $(this).html($("option", $(this)).sort(function(a, b) { 
    var arel = parseInt($(a).attr('rel'), 10);
    var brel = parseInt($(b).attr('rel'), 10);
    return arel == brel ? 0 : arel < brel ? -1 : 1 
}));
  2. 1

    Vous pouvez utiliser le .attr() pour obtenir la valeur d'un attribut dans jQuery. Voir http://api.jquery.com/attr/ pour plus d'info.

    Essayez ceci:

    $(object).each(function() {

    //Keep track of the selected option.
   var selectedValue = $(this).val();

   //sort it out
   $(this).html($("option", $(this)).sort(function(a, b) {
       var aRel = $(a).attr("rel");
       var bRel = $(b).attr("rel");
       return aRel == bRel ? 0 : aRel < bRel ? -1 : 1 
   }));

   //Select one option.
   $(this).val(selectedValue);

});
  3. 1

    Référence pour l'avenir, l'on a accepté la réponse n'est pas complète si option a données ou les accessoires (par ex. .prop('selected', true)). Ils seront enlevés après l'utilisation de .html().

    La fonction ci-dessous est sans doute pas optimisé, mais c'est correctement :

    $.fn.sortChildren = function(selector, sortFunc) {
    $(this)
    .children(selector)
    .detach()
    .sort(sortFunc)
    .appendTo($(this));
};

$('select').sortChildren('option', function(a, b) {
    //sort impl
});
  4. 0

    De l'essayer.

            $(document).ready(function()
        {
            var myarray=new Array();               
            $("select option").each(function()
            {
                myarray.push({value:this.value, optiontext:$(this).text()});
            });

            myarray.sort(sortfun);
            $newHmtl="";
            for(var i=0;i<myarray.length;i++)
            {

                $newHmtl+="<option rel='1' value='"+myarray[i]['value']+"'>"+myarray[i]['optiontext']+"</option>";
            }
            $("select").html($newHmtl);
        });            


        function sortfun(a,b) 
        {
            a = a['value'];
            b = b['value'];                
            return a == b ? 0 : (a < b ? -1 : 1)
        }
  5. 0

    J'avais besoin d'une solution semblable, puis fait quelques changements à la fonction d'origine et il a bien fonctionné.

    function NASort(a, b) {  
    return (a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) ? 1 : -1;
};

$('select option').sort(NASort).appendTo('select');