Ordenar elementos de opciones alfabéticamente usando jQuery

Solución:

Lo que haría es:

1. Extrae el texto y el valor de cada uno <option> en una variedad de objetos;
2. Ordene la matriz;
3. Actualizar el <option> elementos con el contenido de la matriz en orden.

Para hacer eso con jQuery, puedes hacer esto:

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

Aquí hay un jsfiddle.

editar – Si desea ordenar de tal manera que ignore las mayúsculas y minúsculas, puede usar JavaScript .toUpperCase() o .toLowerCase() funciones antes de comparar:

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

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

La respuesta aceptada no es la mejor en todos los casos porque a veces desea conservar clases de opciones y diferentes argumentos (por ejemplo, data-foo).

Mi solucion es:

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

// Para ie11 o aquellos que tienen opciones en blanco, reemplace html (”) empty ()

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

---

---

Utiliza Nuestro Buscador