JavaScript - 对 SELECT 选项进行排序

2023-11-29

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

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

UPDATED

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

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

查看实际效果

[测试版本: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] );
}

​ ​

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript - 对 SELECT 选项进行排序 的相关文章

  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • Javascript 假值(null、未定义、false、空字符串:“”或 '' 和 0)和比较(==)运算符 [重复]

    这个问题在这里已经有答案了 当我使用任何一个值时 null undefined false 0 in a if陈述 它总是被评估为谬误 false 另外 这些值的否定 null undefined false 0 in a if语句总是被评
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • javascript onkeydown - event.which 只给出大写字符的问题

    我编写了一段 JavaScript 代码来在文本区域内按下按键 我已使用 onkeydown 事件来捕获按下的键 并在触发事件时调用函数 在函数中 我使用 event which 来按下按键 但这并没有给出正确的按键按下 对于按下的任何字符
  • 日期格式 yyyy-MM-ddTHH:mm:ssZ

    我认为这应该很简单 但无法得到它 在此格式中 Z 是时区 T 是长时间模式除了使用之外 我怎样才能获得这种格式的日期 DateTime dt DateTime Now Console WriteLine dt ToString yyyy M
  • Magento“忘记密码”电子邮件以错误的语言发送

    我有一个具有多种语言的 Magento 网站 我已经设置了语言包 网站上的所有内容似乎都能正确翻译 交易电子邮件也以正确的语言发送除了 忘记密码 始终以德语发送的电子邮件 这就是我所做的 安装语言包并确保所有模板和文件夹结构正确 例子 ap
  • R Shiny:如何在 NULL 时不显示绘图

    如果您在 R 工作室中运行此代码 您会发现 NULL 数据的绘图仍然是一大块白色 数据为NULL时怎么不显示呢 在其他图表中 大白板看起来不太好 library shiny server lt function input output o
  • 在递归 CTE 下控制同级顺序?

    我有一个 CTE 查询 用于查找主叶和子叶 但我无法控制叶子选择顺序2个兄弟姐妹之间 表中的每一行声明为 childID INT parentID INT NAME NVARCHAR 30 location int Where locati
  • WordPress 中每页的自定义 CSS

    大家早上好 我为我们网站内的某些页面创建了不同的背景和一些其他图像 目前 以下代码与我们网站上的 儿童 页面配合良好
  • jsonp 调用中的错误仅来自 firefox-extension

    我的错误的奇怪之处在于它只发生在我在这篇文章底部链接到的 firefox 扩展中 我无法在任何其他设置中重现此错误 我有这个ajax请求 ajax type GET dataType jsonp url url jsonpCallback
  • Kubernetes docker 容器中的前端 Vue.js 应用程序无法连接到后端

    I have built a front end Vue js application running on a docker container under kubernetes environment the backend is al
  • 防止其他人调用您的 JSON Web 服务

    假设我有一些代码可以通过 JSON 服务调用创建 HTML 页面 如何防止其他人复制粘贴源代码 调用服务并获取第一个用户的结果集 如果我将域作为服务的参数或获取其他内容 例如用户名或密码 它们也可以被复制和粘贴并用于另一个域 我没有找到阻止
  • 在 C 中将 & (addressof) 与 const 变量一起使用

    教科书上说 addressof 运算符不适用于不能应用于表达式 常量 或寄存器变量 常量是否仅意味着 A 7 等文字或也用 const 关键字声明的变量 我认为这仅意味着文字 因为以下代码已编译 int main const int i 1
  • 如何使用会员验证密码事件处理程序?

    使用 asp 创建新用户时 有什么方法可以对密码选择进行一些限制吗 网会员 条件喜欢 密码强度 至少 8 个字符 并强制执行字符复杂性 即 不包含用户的帐户名 长度至少为八个字符 包含以下四个类别中三个类别的字符 英文大写字符 A 到 Z
  • 从现在开始下一个月的 10 号?

    我正在尝试查找从今天开始的下一个月的 10 号 因此 如果今天是 5 月 27 日 那么下一个 10 日就是 6 月 10 日 例如 如果今天是 8 月 1 日 那么接下来的 10 日将是 8 月 10 日 我知道我可以使用找到下个月的第一
  • Java - 对非静态字段列表进行静态引用

    我刚刚进行了实验 发现当我运行滚动代码时 它无法编译 我不明白为什么 我的 IDE 说 无法对非静态字段列表进行静态引用 但我不太明白这是什么或为什么 它还适用于什么 即 它只是私有变量和 或方法吗 为什么 public class MyL
  • 加速度计移动的距离

    我想通过移动 iPhone 来移动 iPhone 屏幕上的对象 矩形 圆形等 例如 我沿 X 轴移动 iPhone 物体也沿 X 轴移动 Y Z轴同样如此 我怎样才能做到这一点 我可以得到它的算法吗 谢谢 附 我看了一会儿 似乎可以使用加速
  • 无法使用Python登录亚马逊

    我正在使用 Python 3 编写一个脚本来登录 Amazon 以获取我的 Kindle 亮点 它基于这篇文章 https blog jverkamp com 2015 07 02 scraping kindle highlights 我无
  • iOS8 AVAudioEngine 如何通过多点连接发送麦克风数据?

    我想通过多点连接 iOS 8 发送麦克风音频数据 并通过接收方的扬声器播放它 我还设置了 AVAudioEngine 并且可以从 上方 扬声器输出听到麦克风数据 但我不知道如何通过网络发送 AVAudioPCMBuffer 这是我的代码片段
  • 全局变量的值在 ValueEventListener 中初始化后会重置

    我有一个名为 bg 的全局变量 它在 firebase 数据库引用 myRef 的 ValueEventListener 内初始化 但是 如果我尝试在 valueeventlistener 块之外使用变量的值 则该变量为空 就好像被重置了一
  • 使用 Big Query 将 firebase event_params 键值数据显示到单行中

    我正在尝试对 Firebase 存储的事件执行 Google BigQuery 我已经执行了以下查询 SELECT FROM myTable LIMIT 6 其结果如下 Row date name event params key even
  • 如何查找已安装的 .NET 版本?

    如何查明安装的 NET 版本 我正在寻找像这样简单的东西java version我可以在命令提示符下输入它 它会告诉我当前安装的版本 我最好补充一点 可能未安装 Visual Studio 这通常是我想了解的有关客户端计算机的信息 有一种更
  • JavaScript - 对 SELECT 选项进行排序

    我使用 PHP 扫描目录并列出所有 xml 文件 每个 XML 文件都包含 名称 元素和 日期 元素 每个 XML 文件的 name 元素作为选项列在选择列表中 这工作得很好 但是 每个 XML 文件中的 日期 元素都不同 并且包含如下日期