Question

我在<c:out> - 标记中有一个无序（通过jsp <select> - 标签动态生成）选项列表。标记渲染后，我使用简单的JavaScript函数重新排序。

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

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

限制

没有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()来完成此操作。

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

compareFunction来自this answer

Answer 2

感谢您的帮助。 “问题”非常简单，但却是不同的错误。

请勿将事件附加到body，并将其附加到根window元素
IE（＆gt; 6）需要另一个方法调用来将事件附加到处理程序
IE（＆gt; 6）需要方法引用，并且没有带参数的直接方法调用

以下代码适用于我的方案

 /* Required by the compatibility requirement for IE8 and older */
 function sortStatus() {
  sortSelectById('elem_id') ;
  // sort other fields...
 }

if (window.addEventListener) {
  window.addEventListener('load', sortStatus, false);
}
else if (window.attachEvent) {
  window.attachEvent('onload', sortStatus);
}

<强>更新

感谢@Howard Renollet！带有额外编码器的尖端非常整洁，效果很好！

一些（JavaScript）eventd重新排序有序的html选择选项

2 个答案: