尝试通过单击按钮对列表框进行排序，而不使用 jQuery

Trying to sort listbox by clicking button, without using jQuery

本文关键字：排序 jQuery 单击 按钮 列表      更新时间：2023-09-26

我正在处理一个列表框，其中包含用户添加的项目。我想出了如何删除项目，但是经过几个小时的尝试，我无法按字母顺序排序。

如果你使用的是jQuery，你可以这样做：

var $listbox = document.getElementById('PairListBox');
var $options = $listbox.find('option');
$options.sort(function(a,b){
  var an = a.textContent.toLowerCase(),
    bn = b.textContent.toLowerCase();
  if(an > bn) {
    return 1;
  }
  if(an < bn) {
    return -1;
  }
  return 0;
});
$options.detach().appendTo($listbox);

编辑：

没有jQuery（也许你可以做得更好）：

var $options = [].map.call($listbox.children, function(option) { return option });;
$options.sort(function(a,b){
  a = a.textContent.toLowerCase();
  b = b.textContent.toLowerCase();
  if(a > b) {
    return 1;
  }
  if(a < b) {
    return -1;
  }
  return 0;
});
$options.forEach(function($option) {
  $listbox.remove($option);
});
$options.forEach(function($option) {
  $listbox.appendChild($option);
});

这有帮助吗？

function SortList(listname) { 
    var $r = $(listname + " option"); 
    $r.sort(function(a, b) { 
        return (a.value < b.value) ? -1 : (a.value > b.value) ? 1 : 0;
        //or you can have a.text, b.text, etc
    }); 
    $($r).remove(); 
    $(listname).append($($r)); 
} 
$('#sort').click(function(e) { SortList('#listbox'); });

从 http://jsfiddle.net/Kz2bg/19/

以下内容将在普通 JS 中完成这项工作。它将选项放入数组中，对其进行排序，然后对选择重新排序。您可以使排序函数成为您喜欢的任何内容，这使用简单的数字排序。

<script>
// Sort options of a select element by value
function sortSelectByValue(select) {
  var arr = toArray(select.options);
  arr.sort(function(a, b) {return a.value - b.value});
  arr.forEach(function(opt) {
    select.appendChild(opt);
  })
  // Optional - set first option as selected
  select.selectedIndex = 0;
}
// Convert a list like object to an Array
function toArray(obj) {
  var arr = [];
  for (var i=0, iLen=obj.length; i<iLen; i++) {
    if (i in obj) {
      arr[i] = obj[i];
    }
  }
  return arr;
}
</script>

一些播放标记：

<select id="sel0">
  <option value="2">2
  <option value="0">0
  <option value="1">1
</select>
<input type="button" value="sort select" onclick="
  sortSelectByValue(document.getElementById('sel0'));
">

如果您想生活在边缘，以下内容适用于现代浏览器：

// Sort options of a select element by value
function sortSelectByValue(select) {
  var arr = Array.prototype.splice.call(select.options, 0, select.options.length)
                 .sort(function(a, b) {return a.value - b.value})
                 .forEach(function(opt) {select.appendChild(opt)});
}

编辑

顺便说一句，在您的原始函数中，以下内容：

var newOption = document.createElement('option');
newOption.value = textbox.value; // The value that this option will have
newOption.innerHTML = textbox.value; // The displayed text inside of the <option> tags

可以是：

var newOption = new Option(textbox.value, textbox.value);
相关文章：