按字母顺序排序选择菜单？答案

【问题标题】：sort select menu alphabetically?按字母顺序排序选择菜单？
【发布时间】：2011-07-12 00:22:52
【问题描述】：

我有以下选择菜单 (jsFiddle)：

<select>
  <option value="volvo">Cars</option>
  <option value="saab">------------</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

使用 Javascript，我将如何按字母顺序重新排序列表，不包括前 2 个选项（Cars 和 -------），它们必须保留在顶部？提前感谢您的帮助。

【问题讨论】：

至于在

标签： javascript html select

【解决方案1】：

我会首先给我想要排序的所有条目一个类名，然后给选择一个 ID：

 <select id="sortableCars">
   <option value="volvo">Cars</option>
   <option class="sortMe" value="saab">------------</option>
   <option class="sortMe" value="volvo">Volvo</option>
   <option class="sortMe" value="saab">Saab</option>
   <option class="sortMe" value="mercedes">Mercedes</option>
   <option class="sortMe" value="audi">Audi</option>
 </select>

至于 javascript

 var mylist = $('#sortableCars');
 var listitems = mylist.children('option.sortMe').get();
 listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
 })
 $.each(listitems, function(idx, itm) { mylist.append(itm); });

【讨论】：

由于您使用的是 mylist.append()，因此您将通过这种方式获得无序选项和有序选项的选择。
关闭，但 JS 在我的测试中不能正常工作。将列表项更改为 $('#sortableCars > .sortMe') 并从 '--------' 选项中删除 sortMe 类可以解决我的问题。
我将其修复为仅选择具有“sortMe”类的那些。有趣的是你怎么会错过重要的细节......

【解决方案2】：

作为一个纯粹主义者，我会说没有任何时候特别提到或要求 jQuery，它可能由于某种原因没有在这个项目中使用。这是一个使用纯 javascript 的示例。

function sortlist(){

 var cl = document.getElementById('carlist');
 var clTexts = new Array();

 for(i = 2; i < cl.length; i++){
    clTexts[i-2] =
        cl.options[i].text.toUpperCase() + "," +
        cl.options[i].text + "," +
        cl.options[i].value + "," +
        cl.options[i].selected;
 }

 clTexts.sort();

 for(i = 2; i < cl.length; i++){
    var parts = clTexts[i-2].split(',');

    cl.options[i].text = parts[1];
    cl.options[i].value = parts[2];
    if(parts[3] == "true"){
        cl.options[i].selected = true;
    }else{
       cl.options[i].selected = false;
    }
 }
}

sortlist();

http://jsfiddle.net/GAYvL/7/

更新不区分大小写。

【讨论】：

我真的很喜欢使用 jQuery，因为它非常简单……这也是它最大的缺点。没有理由增加额外的开销 - 我会投票给你的答案。
jQuery 很棒，我会大力提倡使用它……但如果有人不得不将 jQuery 添加到项目中只是为了支持这样的东西，我会感到内疚……感谢信任投票:)
这个 Put 的大写在所有小写之前，导致类似于 ABCabc 而不是 AaBbCc
我做了一些小改动，使其尽可能接近大小写中性。
请注意，这不会将selected 属性保留到正确的选项

【解决方案3】：

我的第一个方法类似于 Koolinc 的方法，使用 Array.prototype.slice 将 <select> 元素的子节点列表转换为数组。但是，这在 Internet Explorer 8 及更低版本中不起作用，因此我将其更改为提取、排序然后重新插入：

var sel = document.getElementsByTagName("select")[0],
    opts = [];

// Extract the elements into an array
for (var i=sel.options.length-1; i >= 2; i--)
    opts.push(sel.removeChild(sel.options[i]));

// Sort them
opts.sort(function (a, b) { 
    return a.innerHTML.localeCompare(b.innerHTML);
});

// Put them back into the <select>
while(opts.length)
    sel.appendChild(opts.shift());

工作演示：http://jsfiddle.net/3YjNR/2/

【讨论】：

【解决方案4】：

这只是基于@Jeff Parker 的一个更通用的答案！

function sortSelect(select, startAt) {
    if(typeof startAt === 'undefined') {
        startAt = 0;
    }

    var texts = [];

    for(var i = startAt; i < select.length; i++) {
        texts[i] = [
            select.options[i].text.toUpperCase(),
            select.options[i].text,
            select.options[i].value
        ].join('|');
    }

    texts.sort();

    texts.forEach(function(text, index) {
        var parts = text.split('|');

        select.options[startAt + index].text = parts[1];
        select.options[startAt + index].value = parts[2];
    });
}

我还创建了一个小提琴； http://jsfiddle.net/4u86B/1/

【讨论】：

如果<option> 的值中包含|，则会失败。