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

迈不过友情╰ 2021-11-27 06:06 273阅读 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 条评论，273人围观）

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

相关阅读

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

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

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

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

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

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

相关对HashMap进行排序

目录初始化数据通过TreeMap 通过ArrayList 对Key进行排序对Value进行排序通过Lambdas and Streams 对Key进

古城微笑少年丶/ 2022年11月28日 13:34/ 0 赞/ 166 阅读

相关对list进行排序

我们在List里存入一些对象，比如person对象，若想要让这些对象按他们的age属性大小排序，不用我们自己实现，java已经帮我们实现了，我们只要实现Comparator接口

不念不忘少年蓝@/ 2022年09月22日 13:59/ 0 赞/ 290 阅读

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

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

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

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

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

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

相关对随机数进行排序

<table style=""> <tbody style="margin-top:0px; margin-right:0px; margin-bottom:0px; ma

青旅半醒/ 2022年06月10日 12:56/ 0 赞/ 221 阅读

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

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

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

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

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

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

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

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

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