[解決済み] jQueryを使ったオプション要素のアルファベット順ソート

質問

ソートを理解するために option 要素内の select 要素をアルファベット順に並べます。理想的には、ユーザーがいくつかのボタンをクリックしたときにソートされる必要があるため、これを別の関数として持ち、select要素に渡すことができればと思います。

これを行うための良い方法を探し続けましたが、私のために機能するものを見つけることができませんでした。

option 要素は値ではなく、テキストでアルファベット順にソートする必要があります。

これは何らかの方法で可能でしょうか？

どのように解決するのですか？

私ならこうします。

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