84

私は jQuery を持っていますが、組み込みの並べ替えヘルパーがあるかどうかはわかりません。text各項目の、value、およびプロパティの 2 次元配列を作成できますが、JavaScript の組み込みが正しく機能するselectedとは思いません。Array.sort()

4

12 に答える 12

136

オプションを一時配列に抽出し、並べ替えてから、リストを再構築します。

var my_options = $("#my_select option");
var selected = $("#my_select").val();

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    if (a.text < b.text) return -1;
    return 0
})

$("#my_select").empty().append( my_options );
$("#my_select").val(selected);

Mozilla のソート ドキュメント(具体的には compareFunction) とWikipedia のソート アルゴリズムのページが関連しています。

ソートの大文字と小文字を区別しないようにする場合は、次のように置き換えtextますtext.toLowerCase()

上記の sort 関数は、ソート方法を示しています。英語以外の言語を正確にソートするのは複雑な場合があります ( Unicode 照合アルゴリズムを参照してください)。sort 関数でlocaleCompareを使用すると、次のような良い解決策になります。

my_options.sort(function(a,b) {
    return a.text.localeCompare(b.text);
});
于 2009-12-11T01:51:28.060 に答える
20

上記のトムの回答を少し変更して、ソートされた要素を返すだけでなく、実際にソートされるように選択ボックスの内容を変更しました。

$('#your_select_box').sort_select_box();

jQuery関数:

$.fn.sort_select_box = function(){
    // Get options from select box
    var my_options = $("#" + this.attr('id') + ' option');
    // sort alphabetically
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    })
   //replace with sorted my_options;
   $(this).empty().append( my_options );

   // clearing any selections
   $("#"+this.attr('id')+" option").attr('selected', false);
}
于 2011-03-25T13:01:42.593 に答える
18

マークのアイデアをjquery関数にラップしました

$('#your_select_box').sort_select_box();

JQuery 関数: 

$.fn.sort_select_box = function(){
    var my_options = $("#" + this.attr('id') + ' option');
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    })
   return my_options;
}
于 2011-01-20T10:14:41.990 に答える
12

@Juan Perez へのコメントで言及した解決策

$.fn.sortOptions = function(){
    $(this).each(function(){
        var op = $(this).children("option");
        op.sort(function(a, b) {
            return a.text > b.text ? 1 : -1;
        })
        return $(this).empty().append(op);
    });
}

使用法：

$("select").sortOptions();

これはまだ改善することができますが、これ以上追加する必要はありませんでした:)

于 2012-09-06T19:26:09.153 に答える
6

動作するはずの種類のクローズドjQueryチケットがありますが、コアには含まれていませんでした。

jQuery.fn.sort = function() {
  return this.pushStack( [].sort.apply( this, arguments ), []);
};

Googleグループのスレッドから参照されているので、並べ替えに使用される関数を渡すだけだと思います。

function sortSelect(selectToSort) {
    jQuery(selectToSort.options).sort(function(a,b){ 
        return a.value > b.value ? 1 : -1; 
    });
}

それが役に立てば幸い！

于 2008-09-05T14:52:22.200 に答える
6

さて、IE6 では、ネストされた配列の [0] 項目でソートされるようです。

function sortSelect(selectToSort) {
    var arrOptions = [];

    for (var i = 0; i < selectToSort.options.length; i++)  {
        arrOptions[i] = [];
        arrOptions[i][0] = selectToSort.options[i].value;
        arrOptions[i][1] = selectToSort.options[i].text;
        arrOptions[i][2] = selectToSort.options[i].selected;
    }

    arrOptions.sort();

    for (var i = 0; i < selectToSort.options.length; i++)  {
        selectToSort.options[i].value = arrOptions[i][0];
        selectToSort.options[i].text = arrOptions[i][1];
        selectToSort.options[i].selected = arrOptions[i][2];
    }
}

これが他のブラウザで動作するかどうかを確認します...

編集: Firefox でも動作します。

これよりも簡単な方法はありますか？欠落している選択をソートするjavascriptまたはjQueryに組み込まれたメソッドがありますか、それともこれが最善の方法ですか?

于 2008-09-05T14:06:41.950 に答える
4

これはより良い解決策です。グローバル関数を JQuery に宣言する

$.fn.sortSelect = function() {
    var op = this.children("option");
    op.sort(function(a, b) {
        return a.text > b.text ? 1 : -1;
    })
    return this.empty().append(op);
}

そして、コードから関数を呼び出します。

$("#my_select").sortSelect();
于 2012-06-25T19:32:49.787 に答える
2

Array.sort()デフォルトでは、各要素を文字列に変換し、それらの値を比較します。したがって["value", "text", "selected"]、としてソートされ"value, text, selected"ます。ほとんどの場合、これはおそらく正常に機能します。

値のみで並べ替える場合、または値を数値として解釈する場合は、比較関数をsort（）に渡すことができます。

arrOptions.sort(function(a,b) { return new Number(a[0]) - new Number(b[0]); });
于 2008-09-05T14:52:11.077 に答える
1

注意: コンテキスト セレクターを使用する場合、ID を連結するだけでは機能しません。

$.fn.sort_select_box = function(){
    var my_options = $("option", $(this));
    my_options.sort(function(a,b) {
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else return 0
    });
    $(this).empty().append(my_options);
}

// Usando:
$("select#ProdutoFornecedorId", $($context)).sort_select_box();
于 2011-08-29T21:36:28.387 に答える