JavaScript - Sort SELECT options

Question

Using PHP, I scan a directory and list all of the .xml files. Each XML file contains both a "name" element and a "date" element. The "name" element for each XML file is listed as an option in the select list. This works perfectly fine, however, the "date" element in each XML file is different and contains a date format like this: mm/dd/yyyy. What I am trying to figure out how to do is sort the items according to the date, with the earliest date being first one the list and the most recent at the end.

Now say each of those items has a different value for the "date" element. I need to sort those items with the earliest date being first. I'm not sure how I can store the "date" element data somewhere so that it can be handled by JavaScript. I'm sorry if this is a very vague description, it's been baffling me for a while and it's a been confusing to try and explain.

UPDATED

So right now this is what I have 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 guess one thing that would majorly help is knowing if there's a way to store the date somewhere in the tags besides the value attribute seeing how it's already being used. The date itself isn't a concern, I have that much figured it, it's just a matter of storing it somewhere so that it can be called client side.

Answer 1

Updated

You need to:

• use a custom attribute for the dates
• use sort() function's custom compare function parameter
• convert to array to make sorting possible
• convert the dates for string comparison (mm/dd/yyyy -> yyyy-mm-dd)

See it in action

[Tested on: 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

Short and sweet. This version also accounts for dates being in mm-dd-yyyy format as per the OP's request.

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