我要做的是：

1. 将每个的文本和值提取<option>到一个对象数组中；
2. 对数组进行排序；
3. <option>按顺序更新具有数组内容的元素。

要使用 jQuery 做到这一点，您可以这样做：

var options = $('select.whatever option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
options.each(function(i, o) {
  o.value = arr[i].v;
  $(o).text(arr[i].t);
});

这是一个有效的 jsfiddle。

编辑- 如果要排序以忽略字母大小写，可以在比较之前使用 JavaScript.toUpperCase()或.toLowerCase()函数：

arr.sort(function(o1, o2) {
  var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();

  return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});

接受的答案并非在所有情况下都是最好的，因为有时您希望保留选项类别和不同的参数（例如 data-foo）。

我的解决办法是：

var sel = $('#select_id');
var selected = sel.val(); // cache selected value, before reordering
var opts_list = sel.find('option');
opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
sel.html('').append(opts_list);
sel.val(selected); // set cached selected value

//对于ie11或者得到空白选项的，替换html('') empty()

html：

<select id="list">
    <option value="op3">option 3</option>
    <option value="op1">option 1</option>
    <option value="op2">option 2</option>
</select>

jQuery：

var options = $("#list option");                    // Collect options         
options.detach().sort(function(a,b) {               // Detach from select, then Sort
    var at = $(a).text();
    var bt = $(b).text();         
    return (at > bt)?1:((at < bt)?-1:0);            // Tell the sort function how to order
});
options.appendTo("#list");                          // Re-attach to select

我使用了 tracevipin 的解决方案，效果非常好。我在这里为像我这样喜欢找到易于阅读的代码并在理解后对其进行压缩的任何人提供了一个稍微修改的版本。我还使用了.detach而不是.remove保留选项 DOM 元素上的任何绑定。

<select id="mSelect" >
    <option value="val1" > DEF </option>
    <option value="val4" > GRT </option>
    <option value="val2" > ABC </option>
    <option value="val3" > OPL </option>
    <option value="val5" > AWS </option>
    <option value="val9" > BTY </option>
</select>

.

$("#mSelect").append($("#mSelect option").remove().sort(function(a, b) {
    var at = $(a).text(), bt = $(b).text();
    return (at > bt)?1:((at < bt)?-1:0);
}));

这是我改进的Pointy 解决方案版本：

function sortSelectOptions(selector, skip_first) {
    var options = (skip_first) ? $(selector + ' option:not(:first)') : $(selector + ' option');
    var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value, s: $(o).prop('selected') }; }).get();
    arr.sort(function(o1, o2) {
      var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
      return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
    }); 
    options.each(function(i, o) {
        o.value = arr[i].v;
        $(o).text(arr[i].t);
        if (arr[i].s) {
            $(o).attr('selected', 'selected').prop('selected', true);
        } else {
            $(o).removeAttr('selected');
            $(o).prop('selected', false);
        }
    }); 
}

该函数具有skip_first参数，当您想将第一个选项保留在顶部时很有用，例如当它是“选择下面：”时。

它还跟踪先前选择的选项。

用法示例：

jQuery(document).ready(function($) {

  sortSelectOptions('#select-id', true);

});