option
要素内のselect
要素をアルファベット順に並べ替えることを理解しようとしています。理想的には、ユーザーがいくつかのボタンをクリックしたときに並べ替える必要があるため、select要素を渡すことができる別個の関数としてこれが必要です。
私はこれを行う良い方法を求めて高低を検索しましたが、私のために働くものを見つけることができませんでした。
オプション要素は、値ではなくテキストでアルファベット順にソートする必要があります。
これは何らかの方法で可能ですか?
私がやることは:
<option>
のテキストと値をオブジェクトの配列に抽出します。<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);
});
edit—アルファベットの大文字小文字を無視するように並べ替える場合は、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()を置き換えます
<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);
}));
<select id="list">
<option value="op3">option 3</option>
<option value="op1">option 1</option>
<option value="op2">option 2</option>
</select>
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のソリューションを使用しましたが、これは素晴らしく機能しました。私が読みやすいコードを見つけたいと思う人のために、ここに少し修正したバージョンを提供し、それを理解した後、それを圧縮しますafter。また、.detach
の代わりに.remove
を使用して、オプションDOM要素のバインディングを保持しました。
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);
});
私はこのトピックが古いことを知っていますが、私の答えは多くの人々に役立つと思います。
ES6を使用してPointyの回答から作成されたjQueryプラグインを次に示します。
/**
* Sort values alphabetically in select
* source: http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery
*/
$.fn.extend({
sortSelect() {
let options = this.find("option"),
arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort((o1, o2) => { // sort select
let t1 = o1.t.toLowerCase(),
t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each((i, o) => {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
}
});
使い方はとても簡単です
$("select").sortSelect();
jquery.selectboxes.js プラグインにはsortメソッドがあります。プラグインを実装するか、コードに飛び込んでオプションをソートする方法を確認できます。
答えはどれも私には役に立たなかった。何らかの奇妙な理由により、オプションをループするとき、text()
が呼び出されたときに各オプションは何も返しません。代わりに、attr('label')
を介してオプションのラベルを取得する必要がありました
/**
* Sort the options of the target select list
* alphabetically by label. For some reason, when
* we call detach(), the returned options have no
* text() and instead we're forced to get the option's
* label via the 'label' attribute.
* @param select jQuery selector
*/
function sort_multi_select(select) {
var options = select.find('option');
options.detach().sort(function (a, b) {
var at = $(a).attr('label'), //label, not text()
bt = $(b).attr('label');
return at > bt ? 1 : at < bt ? -1 : 0;
});
options.appendTo(select);
}
//example
sort_multi_select($('#my_select'));
これにより、必要に応じて手動で再配置するオプションが提供されます
はい、テキストでオプションを並べ替えて、選択ボックスに追加できます。
function NASort(a, b) {
if (a.innerHTML == 'NA') {
return 1;
}
else if (b.innerHTML == 'NA') {
return -1;
}
return (a.innerHTML > b.innerHTML) ? 1 : -1;
};
Malakgeorgeの答えはニースで、jQuery関数に簡単にラップできます。
$.fn.sortSelectByText = function(){
this.each(function(){
var selected = $(this).val();
var opts_list = $(this).find('option');
opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
$(this).html('').append(opts_list);
$(this).val(selected);
})
return this;
}