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

Question

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

Answer 1

如果您使用的是 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);
});

Answer 2

这有帮助吗？

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/

Answer 3

以下将在纯 JS 中完成这项工作。它将选项放入一个数组中，对其进行排序，然后重新排序 select。您可以随意设置排序功能，这使用简单的数字排序。

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

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

Trying to sort listbox by clicking button, without using jQuery

javascript

listbox

编辑