Options JavaScript – Tri SELECT

En utilisant PHP, je scanne un répertoire et liste tous les fichiers .xml. Chaque fichier XML contient à la fois un élément "nom" et un élément "date". L'élément "nom" pour chaque fichier XML est répertorié comme une option dans la liste de sélection. Cela fonctionne parfaitement bien, cependant, l'élément "date" dans chaque fichier XML est différent et contient un format de date comme celui-ci: mm / jj / aaaa. Ce que j'essaie de comprendre comment faire, c'est trier les éléments en fonction de la date, la première date étant la première et la plus récente à la fin.

Dites maintenant que chacun de ces éléments a une valeur différente pour l'élément "date". Je dois trier ces articles avant la première date. Je ne sais pas comment je peux stocker les données de l'élément "date" quelque part afin de pouvoir être géré par JavaScript. Je suis désolé si c'est une description très vague, cela m'a déconcerté pendant un certain temps et il a été confus d'essayer d'expliquer.

ACTUALISÉ

Donc, en ce moment, c'est ce que j'ai travaillé:

<select name="sel_id" onchange="this.form.submit()" size="20"> <option value="item1">Item 1</option> <option value="item2">Item 2</option> <option value="item3">Item 3</option> <option value="item4">Item 4</option> </select>

Je suppose qu'une chose qui aiderait grandement est de savoir s'il existe un moyen de stocker la date quelque part dans les tags en plus de l'attribut de valeur en voyant comment il est déjà utilisé. La date elle-même n'est pas une préoccupation, je l'ai beaucoup compris, il s'agit simplement de l'entreposer quelque part, de sorte qu'il soit appelé client.

Actualisé

Tu dois:

Utilisez un attribut personnalisé pour les dates
Utilisez le paramètre de fonction de comparaison personnalisée de la fonction sort ()
Convertir en tableau pour rendre possible le tri
Convertissez les dates pour la comparaison des cordes (mm / jj / aaaa -> aaaa-mm-jj)

Voir en action

[Testé sur: IE 5.5+, FF 2+, Chrome 4+, Safari 4+, Opera 9.6+]

HTML:

 <select name="sel_id" id="sel_id" size="4"> <option value="item2" date="02-01-2009">Item 2</option> <option value="item3" date="01-05-2010">Item 3</option> <option value="item1" date="10-06-2007">Item 1</option> <option value="item4" date="04-05-2011">Item 4</option> </select>

Javascript:

 // array functions are not working // on nodeLists on IE, we need to // to convert them to array function toArray( obj ) { var i, arr = []; for ( i = obj.length; i--; ){ arr[i] = obj[i]; } return arr; } // custom compare function for sorting // by the hidden date element function sortByDate( el1, el2 ) { var a = convertToDate( el1.getAttribute("date") ), b = convertToDate( el2.getAttribute("date") ); if ( a < b ) return -1; else if( a > b ) return 1; else return 0; } // convert date for string comparison function convertToDate( date ) { date = date.split("-"); return date[2] + "-" + date[0] + "-" + date[1]; } // select the elements to be ordered var itemsId = document.getElementById("sel_id"), items = itemsId.getElementsByTagName("option"), len = items.length; // convert to array, to make sorting possible items = toArray( items ); // do the item sorting by their date items = items.sort( sortByDate ); // append them back to the parent in order for ( var i = 0; i < len; i++ ) { itemsId.appendChild( items[i] ); }

Court et doux. Cette version explique également que les dates soient en format mm-dd-aaaa selon la demande de l'OP.

 <form> <select id="myList"> <option value="07-01-2010">Item 2</option> <option value="09-21-2009">Item 1</option> <option value="08-22-2010">Item 3</option> </select> </form> <script> var list = document.forms[0].myList, opts = list.options, len = opts.length, sorted = [].slice.call(opts).sort(function(a,b){ return fixDate(a.value) < fixDate(b.value) ? -1 : 1; }); for (var i=0; i<len; i++) { list.appendChild(sorted[i]); } // convert mdy to ymd function fixDate (d) { var a=d.split('-'); a.unshift(a.pop()); return a.join('-'); } </script>

Je prendrais la réponse des galambalazs ci-dessus, mais j'utilise l'attribut data au lieu d'un attribut date. Car "data-date" est considéré comme conforme aux normes alors que la "date" n'est qu'un attribut personnalisé.

Vous pouvez représenter les dates en tant que valeurs d'option ou utiliser un attribut de données pour les stocker avec une option.

 <option value="2010-07-05">..</option>

 <option data-date="2010-07-05">..</option>

En supposant que votre liste de sélection ressemble à ceci:

 <select id="myList"> <option value="2010-07-01">Item 1</option> <option value="2010-06-21">Item 1</option> <option value="2010-08-22">Item 1</option> .. </select>

Utilisez la fonction Array.sort intégrée avec un comparateur personnalisé pour trier les nœuds, et une fois triés, réinsérez-les dans la liste de sélection. Voir un exemple ici .

 /** * Sorts option elements by value attribute which holds a date * * @param {HTMLOptionElement} a first option * @param {HTMLOptionElement} b second option * * @returns {Integer} */ var sortByDate = function(a, b) { return new Date(a.value) - new Date(b.value); } var list = document.getElementById("myList"); var options = list.getElementsByTagName("option"); // NodeList that we get in previous step is an array-like // object but not actually an array. Some call it a fuck-up, // but regardless we need to convert it to an array. var optionsArray = Array.prototype.slice.call(options); // Now that we have an array, we can use the sort method (in-place sorting) optionsArray.sort(sortByDate); // re-insert the sorted nodes for(var i = 0; i < optionsArray.length; i++) { list.appendChild(optionsArray[i]); }