Question

我有一个<select>元素，它有一些初始值，如何在select中添加一个值，然后按字母顺序排序。

我可以使用一些简单的JavaScript添加选项：

var select = document.getElementById("example-select");
select.options[select.options.length] = new Option('Text 1', 'Value1');

......但这只会将其追加到最后。

如何在不使用jQuery的情况下通过JavaScript对<select>元素进行排序。

Answer 1

试试这个

var select = document.getElementById('select');

var sorted = Array.prototype.slice.call(select.options).sort(function(a, b) {
    if(a.label < b.label) return -1;
    if(a.label > b.label) return 1;
    return 0;
});

for(var i = 0; i < sorted.length; i++) {
    select.add(sorted[i]);
}

按label排序。只需将其更改为其他属性即可。

请注意，options 只读。

https://tinker.io/9720d

注意：IE 8及以下版本不起作用

Answer 2

试一试。

var select = document.getElementById("example-select");

var options = select.options;
var newOption = new Option('Text 1', 'Value1');

for (var i = 0, len = options.length; i < len; i++) {
    if (newOption.text.localeCompare(options[i].text) < 0) {
        break;
    }
}

select.insertBefore(newOption, options[i] || null);

Answer 3

有两种方法，一种是创建选项值的数组（或文本，无论你想要排序的是什么），并创建一个对象，其属性的名称是选项值（或文本），值是对选项的引用。

对数组进行排序，然后迭代它，使用成员值从对象中获取选项，例如

function sortOptionsByValue(select) {
  var a = [], o = {}, opt;
  for (var i=0, iLen=select.options.length; i<iLen; i++) {
    opt = select.options[i];
    a.push(opt.value);
    o[opt.value] = opt;
  }
  a.sort();
  while (i--) {
    select.insertBefore(o[a[i]], select.firstChild);
  }
  // Optional, make first option selected
  select.selectedIndex = 0;
}

还有其他方法，上面只是一个。但它可以在任何符合ECMA-262标准的浏览器中运行，并且不依赖于像本机对象那样的主机对象，只是它们的行为就像W3C DOM Core所说的那样。

用JavaScript（没有jQuery）订购`<select>`</select>

3 个答案: