JavaScript - Sorting SELECT Parameters

Question

Using PHP, I browse the directory and list all the XML files. Each XML file contains both a "name" element and a "date" element. The "name" element for each XML file is specified as an option in the selection list. This works great, but the "date" element in each XML file is different and contains a date format, such as: mm / dd / yyyy. What I'm trying to understand how to do this is to sort the items by date, with the earliest date being the first in the list and the very last at the end.

Now let's say that each of these elements has a different meaning for the date element. I need to sort these items with the earliest date. I'm not sure how I can store the data of a date element anywhere so that it can be processed by JavaScript. I am sorry if this is a very vague description, it puzzled me for a while, and it was difficult for me to understand and explain.

UPDATED

So now I am working:

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

I think one thing that will help a lot is to know if there is a way to save the date somewhere in tags other than the value attribute, seeing how it is already in use. The date itself does not cause concern, I understood it so much, it is just a matter of keeping it somewhere so that it can be called the client side.

Answer 1

:

• ()
• ,
• (mm/dd/yyyy → yyyy-mm-dd)

[: 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] );
}

Answer 2

. mm-dd-yyyy 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 m-d-y to y-m-d
  function fixDate (d) {
    var a=d.split('-');
    a.unshift(a.pop()); 
    return a.join('-');
  }

</script>

Answer 3

galambalazs , data date. "-" , "" .

Answer 4

You can present dates as parameter values ​​or use an attribute to save them with an option.

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

or

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

Assuming your picklist is as follows:

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

Use the built-in Array.sort function using a special comparator to sort the nodes and re-insert them into the selection list after sorting . See the example here .

/**
 * 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]);
}
​