JavaScript - 排序SELECT选项 [英] JavaScript - Sort SELECT options

问题描述

使用PHP，我扫描一个目录并列出所有的.xml文件。每个XML文件都包含一个名称元素和一个日期元素。每个XML文件的名称元素在选择列表中作为选项列出。这很好，但是，每个XML文件中的date元素是不同的，并且包含如下所示的日期格式：mm / dd / yyyy。我试图找出如何做的是根据日期对项目进行排序，最早的日期是列表中的第一个，最后是最后一个。

现在说每个项目对于日期元素都有不同的值。我需要将这些项目排在最早的日期之前。我不知道如何将date元素数据存储在某处，以便可以通过JavaScript处理。我很抱歉，如果这是一个非常含糊的描述，它让我感到困惑了一段时间，而且试图解释它一直令人困惑。

UPDATED

所以现在这就是我的工作：

 < select name =sel_idonchange =this.form.submit（）size =20> 
< option value =item1>第1项< / option> 
< option value =item2>第2项< / option> 
< option value =item3>第3项< / option> 
< option value =item4>第4项< / option> 
< / select> 
  

我猜想有一件事可以帮助您了解是否有方法将日期存储在除了value属性之外的标签，看看它已经被使用了。日期本身不是问题，我有这么多的想法，只是将它存储在某个地方，以便它可以被称为客户端。

方案

更新

您需要：
$ b

• 使用日期的自定义属性


• 使用sort（）函数的自定义比较函数参数


• 转换为数组以便进行排序


• 转换字符串比较的日期（mm / dd / yyyy - > yyyy-mm-dd） li>
  

请参阅它在行动

[测试：IE 5.5+，FF 2+，Chrome 4+，Safari 4+，Opera 9.6+]

HTML：
$ b

 < select name =sel_idid =sel_idsize =4> 
< option value =item2date =02-01-2009>第2项< / option> 
< option value =item3date =01-05-2010>第3项< / option> 
< option value =item1date =10-06-2007>第1项< / option> 
< option value =item4date =04-05-2011>第4项< / option> 
< / select> 
  

Javascript：

  //数组函数不工作
 //对于IE上的nodeLists，我们需要
 //将它们转换为数组
 function toArray （obj）{
 var i，arr = []; 
 for（i = obj.length; i--;）{
 arr [i] = obj [i]; 
} 
 return arr; 
} 
 
 //自定义比较函数用于排序
 //由隐藏日期元素
函数sortByDate（el1，el2）{
 var a = convertToDate（el1.getAttribute（date）），
b = convertToDate（el2.getAttribute（date））; 
 if（a  else if（a> b）返回1; 
 else返回0; 
 
 
 //将字符串比较的日期转换为
函数convertToDate（date）{
 date = date.split（ - ）; 
 return date [2] + - + date [0] + - + date [1]; 
} 
 
 //选择要订购的元素
 var itemId = document.getElementById（sel_id），
 items = itemsId.getElementsByTagName（option ），
 len = items.length; 
 
 //转换为数组，以便进行排序
 items = toArray（items）; 
 
 //按日期排序项目
 items = items.sort（sortByDate）; 
 
 //将它们追加回父
 for（var i = 0; i< len; i ++）{
 itemsId.appendChild（items [i]） ; 
 
  

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.

解决方案

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

​ ​

这篇关于JavaScript - 排序SELECT选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！