javascript - 一些(JavaScript)事件重新排序有序的 html 选择选项

Question

我在 <c:out> 中有一个无序的(通过 jsp <select> -tags 动态生成的)选项列表-标签。 呈现标签后，我使用简单的 JavaScript 函数对其重新排序。

如果我使用 onClick - <select> 的事件处理程序- 元素，我将在网页上获取/查看有序列表。如果我将该函数附加到我的 onLoaded -事件处理程序，该函数将被调用并且调试器向我显示正确的值，但是我的 option 的结果顺序-元素未排序。

如果我在 dom 元素之后添加方法调用，带有普通的 <script> -tag，同样的行为发生。

限制

• 没有 jQuery
• 数据源不可排序
• onClick -处理程序不是探测器解决方案
• 必须在旧浏览器中工作

JavaScript 源代码

  function sortSelectById(elementId) {
    var list = document.getElementById(elementId);
    var options = []

    for(var i = 0; i < list.length; i++) {
      options[i] = [];
      options[i][0] = list.options[i].text;
      options[i][1] = list.options[i].value;
      options[i][2] = list.options[i].selected;
    }

    options.sort();

    for (var i = 0; i < options.length; i++) {
      list.options[i].text = options[i][0];
      list.options[i].value = options[i][1];
      list.options[i].selected = options[i][2];
    }

    return;
  }

Answer 1

您遇到的问题是由二维数组引起的。 JavaScript 需要被准确告知排序依据。

我们通过将 compareFunction 传递给 Array.prototype.sort() 来做到这一点.

这是一个例子:

function compareFunction(a, b) {
    if (a[0] === b[0]) {
        return 0;
    }
    else {
        return (a[0] < b[0]) ? -1 : 1;
    }
}

function sortSelectById(elementId) {
    var list = document.getElementById(elementId);
    var options = []

    for (var i = 0; i < list.length; i++) {
        options[i] = [];
        options[i][0] = list.options[i].text;
        options[i][1] = list.options[i].value;
        options[i][2] = list.options[i].selected;
    }

    options.sort(compareFunction);

    for (var i = 0; i < options.length; i++) {
        list.options[i].text = options[i][0];
        list.options[i].value = options[i][1];
        list.options[i].selected = options[i][2];
    }
    document.getElementById("select").selectedIndex = 0;
    return;
}

sortSelectById("select");

<select id="select">
    <option>Banana</option>
    <option>Apple</option>
    <option>Orange</option>
    <option>Grape</option>
</select>

compareFunction 借自 this answer