JavaScript - 排序选择选项

标签 javascript html select sorting

我使用 PHP 扫描目录并列出所有 .xml 文件。每个 XML 文件都包含一个“名称”元素和一个“日期”元素。每个 XML 文件的“名称”元素作为一个选项列在选择列表中。这工作得很好,但是,每个 XML 文件中的“日期”元素是不同的,并且包含这样的日期格式:mm/dd/yyyy。我想弄清楚如何根据日期对项目进行排序,最早的日期排在列表的第一个,最近的排在最后。

现在假设这些项目中的每一项都有不同的“日期”元素值。我需要对这些项目进行排序,最早的日期排在第一位。我不确定如何将“日期”元素数据存储在某处,以便它可以由 JavaScript 处理。如果这是一个非常模糊的描述,我很抱歉,这让我困惑了一段时间,尝试解释也很困惑。

已更新

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

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

我想有一件大有帮助的事情是了解是否有一种方法可以将日期存储在标签中的某处,除了 value 属性之外,看看它是如何被使用的。日期本身不是问题,我有很多想法,这只是将它存储在某个地方以便它可以被称为客户端的问题。

最佳答案

Updated

您需要:

  • 为日期使用自定义属性
  • 使用 sort() 函数的自定义比较函数参数
  • 转换成数组以便排序
  • 转换日期以进行字符串比较 (mm/dd/yyyy -> yyyy-mm-dd)

See it in action

[测试于: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 - 排序选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3153254/

相关文章:

javascript - 如何从 mongoDB 获取特定日期之间的数据(日期在我们的文档中存储为createdOn)?

javascript - 如何使用 javascript 将 servlet 响应传递给 html 文本

mysql - 这个 SELECT 查询有什么问题?

javascript - 如何将按位运算应用于 JS 数字的实际 IEEE 754 表示?

javascript - 滚动功能处于事件状态时如何删除类

javascript - 如何使用SessionState获取剩余 session 超时时间?

html - 应用边距或填充时,div 内的 header 标记会将父 div 向下推

javascript - 双箭头出现在选择物化上

sql-server - 如何在 Ms Sql select 中设置变量

sql-server - SQL 查询改进 - 使用 max 和 groupby 选择