現在選択されている項目を保持しながら、HTML 選択のオプションを値で並べ替える最も効率的な方法は何ですか?

StackOverflow https://stackoverflow.com/questions/45888

質問

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

役に立ちましたか？

解決

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

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 関数内は良い解決策です。例:

my_options.sort(function(a,b) {
    return a.text.localeCompare(b.text);
});

他のヒント

単に並べ替えられた要素を返すのではなく、並べ替えられる選択ボックスの内容を実際に変更するように、上記のトムの回答をわずかに変更しました。

$('#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);
}

Mark のアイデアを 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;
}

@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();

これはまだ改善の余地がありますが、これ以上の付加機能を追加する必要はありませんでした:)

あるよ クローズされた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; 
    });
}

それが役に立てば幸い！

さて、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に組み込まれていますか、それともこれが最良の方法ですか?

これはより良い解決策です。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();

Array.sort() デフォルトでは、各要素を文字列に変換し、それらの値を比較します。それで ["value", "text", "selected"] 次のように並べ替えられます "value, text, selected". 。おそらく、ほとんどの場合、これでうまくいくでしょう。

値のみでソートしたい場合、または値を数値として解釈したい場合は、比較関数を sort() に渡すことができます。

arrOptions.sort(function(a,b) { return new Number(a[0]) - new Number(b[0]); });

覚えて：コンテキストセレクターを使用したい場合は、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();
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top