【问题标题】:Sorting Select Option in Javascript - Based on multiple values in same row在Javascript中对选择选项进行排序-基于同一行中的多个值
【发布时间】:2013-01-08 10:00:28
【问题描述】:

我已经创建了一个这样的列表框,并创建了一个有助于对数据进行排序的标题栏:

ID                 Name
------------------------------------------------------------
ID1                Identity One
ID2                Identity Two
ID3                Identity Three
ID4                Identity Four
-------------------------------------------------------------

我需要根据 ID 和名称对上面的列表进行排序,这意味着当用户单击 ID 时,它应该根据 ID 对列表进行排序,反之亦然。但问题出在数据层,我们在一行中得到了这样的结果:

ID1   &nbsp:Idenitity One

所以我们在选项标签中打印相同的内容,并获得如上所示的输出。生成上述输出的代码是:

 <select id="selSort" size="10" style="width:350px" id="rpt">
<option value = "ID1">
        ID1 &nbsp; &nbsp; Identity One
</option>
<option value = "ID2">
        ID2 &nbsp; &nbsp; Identity Two
</option>
<option value = "ID4">
        ID4 &nbsp; &nbsp; Identity Four
</option>
<option value = "ID3">
        ID3 &nbsp; &nbsp; Identity Three
</option>

我的问题是如何实现上述场景的排序功能?是的,我尝试排序,但它是对整个列表框进行排序,而不是基于单个值。至少现在我能做的是格式化传入的数据,将所有 Id 放在一个数组中,将名称放在另一个数组中,因此任何关于此的指南/指针都会受到赞赏。如果我没有解释清楚,请告诉我

编辑:

我尝试对列表框进行排序的代码

function sortSelect(selElem) {
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }
    return;
}

【问题讨论】:

  • 能否请您发布您尝试过的内容I tried to sort, but it is sorting entire list box
  • @BalaKrishnan,我发布了代码
  • 您是否在按钮单击中对其进行排序?或一些自定义标题点击?
  • @BalaKrishnan 自定义标题点击..

标签: java javascript html


【解决方案1】:

你可以使用自定义数组排序看看这个How to sort select base on an id ?

这里的想法只是创建一个数组并根据其值对其进行排序,而不是根据排序后的值动态创建选项。

自定义排序代码

source.sort(function (x, y) {
  if (isAsc) 
     return y.id - x.id;
  else 
    return x.id - y.id;
});

【讨论】:

  • 非常感谢您的帮助,但我忘了提到的是我们没有使用 jQuery... :(
  • @PradeepSimha ,排序部分仅在 Js 中,我只是使用 JQuery 仅查询元素。所以你可以使用它。
猜你喜欢
  • 2021-09-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-02
  • 2022-06-11
  • 1970-01-01
  • 1970-01-01
  • 2017-12-16
相关资源
最近更新 更多