JavaScript-排序选择选项_Javascript_Html_Select_Sorting

JavaScript-排序选择选项

javascript html select sorting

JavaScript-排序选择选项,javascript,html,select,sorting,Javascript,Html,Select,Sorting,使用PHP，我扫描一个目录并列出所有的.xml文件。每个XML文件都包含一个“name”元素和一个“date”元素。每个XML文件的“name”元素作为选项列在选择列表中。这可以很好地工作，但是，每个XML文件中的“date”元素是不同的，并且包含如下的日期格式：mm/dd/yyyy。我想知道的是如何根据日期对项目进行排序，最早的日期是列表中的第一个日期，最近的日期是最后一个日期现在假设这些项中的每一项都有一个不同的“date”元素值。我需要把最早的日期排在第一位。我不确定如何将“date”元

使用PHP，我扫描一个目录并列出所有的.xml文件。每个XML文件都包含一个“name”元素和一个“date”元素。每个XML文件的“name”元素作为选项列在选择列表中。这可以很好地工作，但是，每个XML文件中的“date”元素是不同的，并且包含如下的日期格式：mm/dd/yyyy。我想知道的是如何根据日期对项目进行排序，最早的日期是列表中的第一个日期，最近的日期是最后一个日期

现在假设这些项中的每一项都有一个不同的“date”元素值。我需要把最早的日期排在第一位。我不确定如何将“date”元素数据存储在某个地方，以便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>


项目1
项目2
项目3
项目4

我想最有帮助的一件事就是知道除了value属性之外，是否还有一种方法可以将日期存储在标签的某个地方，看看它是如何被使用的。日期本身并不重要，我已经做了很多计算，只是把它存储在某个地方，这样就可以称之为客户端了

更新 您需要：

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

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

为日期使用自定义属性
使用sort（）函数的自定义比较函数参数
转换为数组以使排序成为可能
转换字符串比较的日期（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>

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


项目2
项目3
项目1
项目4

Javascript:

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

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

//数组函数不工作
//关于IE的节点列表，我们需要
//将它们转换为数组
功能到阵列（obj）{
var i，arr=[]；
对于（i=obj.length；i--；）{
arr[i]=obj[i]；
}
返回arr；
}
//用于排序的自定义比较函数
//通过隐藏的日期元素
功能分类码（el1，el2）{
var a=convertToDate（el1.getAttribute（“日期”），
b=转换日期（el2.getAttribute（“日期”）；
如果（ab）返回1；
否则返回0；
}
//转换日期以进行字符串比较
函数convertToDate（日期）{
日期=拆分日期（“-”）；
返回日期[2]+“-”+日期[0]+“-”+日期[1]；
}
//选择要排序的元素
var itemsId=document.getElementById（“sel_id”），
items=itemsId.getElementsByTagName（“选项”），
len=项目长度；
//转换为数组，使排序成为可能
项目=toArray（项目）；
//按日期对项目进行排序
items=items.sort（sortByDate）；
//按顺序将它们追加回父级
对于（变量i=0；i



 您可以将日期表示为选项值，也可以使用存储选项来存储日期
<option value="2010-07-05">..</option>

。。

或
。。

假设您的选择列表如下所示：
<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>


项目1
项目1
项目1
..

使用内置函数和自定义比较器对节点进行排序，排序后将其重新插入选择列表
/**
*按保存日期的value属性对选项元素排序
*
*@param{HTMLOptionElement}第一个选项
*@param{HTMLOptionElement}b第二个选项
*
*@返回{Integer}
*/
var sortByDate=函数（a，b）{
返回新日期（a值）-新日期（b值）；
}
var list=document.getElementById（“myList”）；
var options=list.getElementsByTagName（“选项”）；
//我们在前一步中得到的节点列表是一个类似
//对象，但实际上不是数组。有人说这是他妈的，
//但无论如何，我们需要将其转换为数组。
var optionArray=Array.prototype.slice.call（选项）；
//现在我们有了一个数组，我们可以使用排序方法（就地排序）
optionArray.sort（sortByDate）；
//重新插入已排序的节点
对于（变量i=0；i
又短又甜。根据OP的要求，此版本还说明了日期为mm dd yyyy格式
<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>


项目2
项目1
项目3
var list=document.forms[0]。myList，
opts=list.options，
len=选择长度，
排序=[].slice.call（opts）.sort（函数（a，b）{
返回固定日期（a值）<固定日期（b值）？-1:1；
});
对于（var i=0；i我会从上面的galambalazs中得到答案，但是使用数据属性而不是日期属性。因为“数据日期”被认为符合标准，而“日期”只是一个自定义属性。
不起作用。你不能从这样的字符串创建日期，而且你忘记了在放置“排序”之前清除选项中的。您可以从字符串创建日期，如“yyy-mm-dd”
。适用于Chrome和Firefox。如果一些浏览器抱怨，请手动编写日期或使用日期库，如，但这不是问题的重点。我特意删除了代码，以首先清除选项数组，因为这是不需要的。请参阅-将节点newChild添加到此节点的子节点列表的末尾。如果newChild已在树中，则首先将其删除。“你说得对，我在这两个方面都是正确的。虽然如果日期字符串的格式是这样的，没有理由转换为日期…字符串比较就足够了。你指出的关于appendChild的事情非常有趣，谢谢。（编辑：在查看OP时，我发现他的日期格式是mm/dd/yyyy，所以看起来我们毕竟还有更多的工作要做；@no-mm/dd/yyyy有点问题，但我认为转换为日期会有帮助，因为字符串比较是按字典顺序进行的，所以类似“10”<“2”这样的事情计算为真。我意识到代码可能在