JavaScript对select标签文字内容进行排序

迈不过友情╰ 2021-11-27 06:06 292阅读 0赞

在网页开发时，有时会用到下拉框控件，如果通过后台传入的数据没有做排序，而且数据相对较多，那么在前台页面使用下拉框将是件比较痛苦的事。

这时候有两种做法，一种是修改后台代码，增加相关的数据排序处理；另一种是在web前端进行处理，这样的好处时不用对工程打包发布，只需要替换相关的html文件。

下面介绍下web端处理的方式：

前端html为

<select name="data1"  id="data1" style="width:200px;">

其中：data1位标签名称

增加前台JavaScript处理逻辑为

window.onload = function (){
                var isDesc = true;
                var select1= document.getElementById("data1");        //获取相关select
                var ops = select1.getElementsByTagName("option");     //获取对应的option HTMLCollection
                var arrOps = Array.prototype.slice.call(ops, 0);      //转换为数据
                arrOps.sort(function (a, b) {
                    if (a.text > b.text) {
                        return isDesc == true ? 1 : -1;
                    } else {
                        return isDesc == true ? -1 : 1;
                    }
                });
                select1.options.length = 0;                          //清除原有select数据
                arrOps.map(function (op) {
                    select1.appendChild(op);                         //增加排序数据
    
                });
            }

对于select中存在中文信息时，需要适当调整相关的JavaScript脚本按照中文拼音排序，具体代码为

window.onload = function (){
                var isDesc = true;
                var select1= document.getElementById("data1");        //获取相关select
                var ops = select1.getElementsByTagName("option");     //获取对应的option HTMLCollection
                var arrOps = Array.prototype.slice.call(ops, 0);      //转换为数据
                arrOps.sort(function (a, b) {
                    if (a.text.localeCompare(b.text, 'zh')>0） {
                        return isDesc == true ? 1 : -1;
                    } else {
                        return isDesc == true ? -1 : 1;
                    }
                });
                select1.options.length = 0;                          //清除原有select数据
                arrOps.map(function (op) {
                    select1.appendChild(op);                         //增加排序数据
    
                });
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读

相关怎么样用JavaScript对数字数组进行排序

JavaScript的Array.sort（）方法被用来就地[数组][Link 1]元素进行排序，并返回排序后的数组。此函数以字符串格式对元素进行排序。它对字符串数组有效，但对

超、凢脫俗/ 2024年04月01日 16:06/ 0 赞/ 82 阅读

相关 JavaScript如何对数字数组进行排序

![24da7784f01d798fbfca8682ae17c720.jpeg][] javaScript的Array.sort（）方法被用来就地数组元素进行排序，并返回排序

r囧r小猫/ 2024年03月26日 18:10/ 0 赞/ 115 阅读

相关使用 JavaScript 对 HTML 表格进行排序

我们经常遇到希望使表格具有交互性的情况。我们可能只想通过单击列或任何其他方法对它们进行排序。HTML 没有任何编程能力，因此我们必须使用 JavaScript 对 HTML 表

╰半夏微凉°/ 2023年09月30日 12:08/ 0 赞/ 30 阅读

相关如何在JavaScript中对对象数组进行排序

如果需要按特定顺序对对象数组进行排序，我们很有可能会直接找个 JS 库来用。其实大可不必，JS 原生中的 Array.sort就能直接一些复杂又漂亮的排序。本文中，将介绍一

╰半橙微兮°/ 2022年12月25日 05:00/ 0 赞/ 258 阅读

相关如何在JavaScript中对对象数组进行排序

> 作者： James Hibbard > 译者：前端小智 > 来源：sitepoint > 点赞再看，养成习惯 > > 本文 `GitHub` [https://

迈不过友情╰/ 2022年12月24日 05:55/ 0 赞/ 235 阅读

相关 js 对 select 中的 option 进行中文排序问题

从数据库中读取出 select 列表的 option 值是按照数据库中的顺序进行排列的，有时需要对 optiion 的中文按照字母序进行排序，这时需要注意的问题是 optio

痛定思痛。/ 2022年08月10日 14:49/ 0 赞/ 226 阅读

相关对HashMap对象的键值对内容进行排序

1、首先，HashMap集合对象存储的是无序的键值对是不能对HashMa集合对象排序，但是我们可以取出HashMap集合对象的键值对内容，对这个进行排序。 2、HashMap

小咪咪/ 2022年07月20日 12:07/ 0 赞/ 248 阅读

相关 xpath提取 html标签的文字内容

问题描述：做爬虫的过程中经常需要对html标签的文字内容进行提取，有几种情况 1.提取属性的值，2.提取标签的值，3.提取段落的所有文字本文用的是 scrapy

末蓝、/ 2022年01月21日 09:21/ 0 赞/ 859 阅读

相关 JavaScript对select标签文字内容进行排序

在网页开发时，有时会用到下拉框控件，如果通过后台传入的数据没有做排序，而且数据相对较多，那么在前台页面使用下拉框将是件比较痛苦的事。这时候有两种做法，一种是修改后台代码，增

迈不过友情╰/ 2021年11月27日 06:06/ 0 赞/ 293 阅读

相关 JavaScript中对数组与对象数组进行排序

一、对数组进行排序：sort() 我们知道，在js中，我们可以采用sort()方法对数组进行排序，但是它并不是万能的，下面就具体剖析下： 1、sort()方法说明该方法

￡神魔★判官ぃ/ 2021年11月04日 22:52/ 0 赞/ 580 阅读