drop-down-menu - Tri de la liste déroulante à l'aide de Javascript

47

Vous pouvez utiliser jQuery et quelque chose comme ceci:
```
$("#id").html($("#id option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))
```
Mais c'est probablement mieux de se demander pourquoi et ce que vous essayez d'accomplir.
- +1, basé uniquement sur ce qu'il faudrait faire sans jQuery (voir la réponse ci-dessous).
- Cela a très bien fonctionné pour moi. Ma liste déroulante est renseigné sur le changement d'une autre liste déroulante. Ce code a fait l'affaire! Merci @mastro
- fonctionne comme un rêve...concis...merci!
InformationsquelleAutor masto

<select id="foo" size="10">
  <option value="3">three</option>
  <option value="1">one</option>
  <option value="0">zero</option>
  <option value="2">two</option>
</select>
<script>
  //WARN: won't handle OPTGROUPs!
  var sel = document.getElementById('foo');
  //convert OPTIONs NodeList to an Array
  //- keep in mind that we're using the original OPTION objects
  var ary = (function(nl) {
    var a = [];
    for (var i = 0, len = nl.length; i < len; i++)
      a.push(nl.item(i));
    return a;
  })(sel.options);
  //sort OPTIONs Array
  ary.sort(function(a,b){
    //sort by "value"? (numeric comparison)
    //NOTE: please remember what ".value" means for OPTION objects
    return a.value - b.value;
    //or by "label"? (lexicographic comparison) - case sensitive
    //return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
    //or by "label"? (lexicographic comparison) - case insensitive
    //var aText = a.text.toLowerCase();
    //var bText = b.text.toLowerCase();
    //return aText < bText ? -1 : aText > bText ? 1 : 0;
  });
  //remove all OPTIONs from SELECT (don't worry, the original
  //OPTION objects are still referenced in "ary") ;-)
  for (var i = 0, len = ary.length; i < len; i++)
    sel.remove(ary[i].index);
  //(re)add re-ordered OPTIONs to SELECT
  for (var i = 0, len = ary.length; i < len; i++)
    sel.add(ary[i], null);
</script>

.la comparaison de la valeur ne fonctionne que pour les objets numériques; pour le tri lexicographique voir le comparateur de masto de réponse.
Désolé, mais je ne comprends pas quel est le point de votre commentaire, je suis sûr que vous avez regardé UNE ligne en dessous de cette comparaison numérique qui fait exactement un, devinez quoi, "lexicographique" de comparaison sur les options "texte"?! 🙁
Belle utilisation de <select> spécifique ajouter()/remove()
cette solution conserve tous les attribut attaché à ces options; dans le cas où vous utilisez ceux-ci pour stocker des données: il ne sera pas perdu sur la re-commande. Très sympa! c'est une alternative à l'ordre par l'un de ces attributs dans l'aire.fonction de tri : var aPosition = parseInt( un.getAttribute('Position') ); var bPosition = parseInt( b.getAttribute('Position') ); return aPosition < bPosition ? -1 : aPosition > bPosition ? 1 : 0;

InformationsquelleAutor altblue

Vous pouvez essayer de JQuery fonction de tri pour ce travail --

Essayez ceci

CODE HTML -

<select id="ddlList">
  <option value="3">Three</option>
  <option value="1">One</option>
  <option value="1">one</option>
  <option value="1">a</option>
  <option value="1">b</option>
  <option value="1">A</option>
  <option value="1">B</option>
  <option value="0">Zero</option>
  <option value="2">Two</option>
  <option value="8">Eight</option>
</select>

JQUERY -

$("#ddlList").html($('#ddlList option').sort(function(x, y) {        
     return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
}));
$("#ddlList").get(0).selectedIndex = 0;
e.preventDefault();

vous pouvez également utiliser le tableau de tri pour cette -

Essayez Ceci

 var options = $('#ddlList option');
 var arr = options.map(function (_, o) { return { t: $(o).text(), v: o.value }; }).get();
 arr.sort(function (o1, o2) { return o1.t.toUpperCase() > o2.t.toUpperCase() ? 1 : o1.t.toUpperCase() < o2.t.toUpperCase() ? -1 : 0; });         
 options.each(function (i, o) {
     o.value = arr[i].v;
     $(o).text(arr[i].t);
 });

InformationsquelleAutor Ishan Jain

3

Mettre les valeurs d'option et texte dans un tableau, trier le tableau, puis de remplacer l'option éléments avec de nouveaux éléments construits à partir du tableau trié.
- voici un lien que j'ai trouvé qui montre comment faire: w3schools.com/jsref/jsref_sort.asp
InformationsquelleAutor Russ Cam

DÉPEND DE JQUERY

function SortOptions(id) {
    var prePrepend = "#";
    if (id.match("^#") == "#") prePrepend = "";
    $(prePrepend + id).html($(prePrepend + id + " option").sort(
        function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 })
    );
}

Exemples:

<select id="mon-list-id"> est triée avec:

SortOptions("#my-list-id");

SortOptions("my-list-id");

Si vous souhaitez trier les éléments en fonction de l' valeur plutôt que le texte, puis la fonction de lecture: function (a, b) { return a.value - b.value })

InformationsquelleAutor Peter Moresi

POUR DÉROULANTE POUR L'ENSEMBLE DU PROJET

$(document).ready(function () {
    $.when($('select').addClass('auto-drop-sort')).then($.fn.sortDropOptions("auto-drop-sort"))
})

/*sort all dropdown*/
$.fn.sortDropOptions = function(dropdown_class){
    var prePrepend = ".";
    if (dropdown_class.match("^.") == ".") prePrepend = "";
    var myParent = $(prePrepend + dropdown_class);
    $.each(myParent, function(index, val) {
        /*if any select tag has this class 'manual-drop-sort' this function wont work for that particular*/
        if ( ! $(val).hasClass('manual-drop-sort') ) {
            var selectedVal = $(val).val()
            $(val).html($(val).find('option').sort(
                function (a, b) {
                    if ( a.value != -1 && a.value != 0 && a.value != '' ) {
                        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 
                    }
                })
            );
            $(val).val(selectedVal)
        }else{
            /* set custom sort for individual select tag using name/id */
        }
    });
}

InformationsquelleAutor iNandi

Vous devez vous connecter pour publier un commentaire.