如何在<select>列表中对字段进行排序，但忽略一个选项

Question

我有以下脚本，可以按字母顺序对列表的值进行排序，因为该列表根据网站的语言而变化。

<select style="width:250px" id="list1">
    <option value="">Confederation</option> <!--I would like to keep this at the top-->
    <option value="40934">Africa (CAF)</option>
    <option value="44624">Asia (AFC)</option>
    <option value="29521">Europe (UEFA)</option>
    <option value="43099">North &amp; Central America (CONCACAF)</option>
    <option value="46617">Oceania (OFC)</option>
    <option value="38731">South America (CONMEBOL)</option>
</select>

<script>
    $("#list1").html($("#list1 option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
    }))
</script>

如您所见，在脚本执行后，输出内容如下：

<select style="width:250px" id="list1">
    <option value="40934">Africa (CAF)</option>
    <option value="44624">Asia (AFC)</option>
    <option value="">Confederation</option> <!-- But it gets sorted also and it ends up in the middle -->
    <option value="29521">Europe (UEFA)</option>
    <option value="43099">North &amp; Central America (CONCACAF)</option>
    <option value="46617">Oceania (OFC)</option>
    <option value="38731">South America (CONMEBOL)</option>
</select>

问题在于第一个应该排在最前面的值也被排序了，所以它最终出现在列表的中间，看起来很奇怪。

我想修改javascript代码，将第一个选项值从排序中排除，但保持其在顶部。需要考虑的一件事是，这个第一项的值为""，应该保持这样，因为我有另一个小脚本，强制用户选择其他选项才能处理表单。

非常感谢您的帮助!

- Arkymedes

Answer 1

你可以使用 :gt() 选择器 来完成此操作：

$("#list1").append($("#list1 option:gt(0)").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}));

这将选择匹配集合中索引大于0的所有选项。

FIDDLE演示

- palaѕн

Answer 2

您可以使用“not”方法：

$("#list1 option").not(':first').sort(function(a, b) {
    return a.text > b.text;
}).appendTo('#list1');

http://jsfiddle.net/jgvfG/

- Ram

Answer 3

http://jsfiddle.net/Ljhpb/5/

$("#list1").html($("#list1 option").sort(function (a, b) {
    if(!a.value) return;
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
    }))

- A. Wolff

Answer 4

试试这个，

$("#list1").html(
    $("#list1 option:first")+    
    $("#list1 option:first").nextAll('option').sort(function (a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
});)

Fiddle http://jsfiddle.net/HKJNb/

Fiddle http://jsfiddle.net/HKJNb/

- Rohan Kumar