option要素内のselect要素をアルファベット順にソートすることを理解しようとしています。理想的には、ユーザーがいくつかのボタンをクリックしたときにソートする必要があるため、select 要素を渡すことができる別の関数としてこれを使用したいと考えています。
これを行う良い方法を高低で検索しましたが、うまくいくものを見つけることができませんでした。
オプション要素は、値ではなく、テキストのアルファベット順にソートする必要があります。
これは何らかの方法で可能ですか？
質問する
172639 次
11 に答える
131
私がすることは次のとおりです。
- それぞれのテキストと値を
<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);
});
編集— アルファベットの大文字と小文字を区別しないように並べ替えたい場合は、比較する前に 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;
});
于 2012-08-22T12:40:00.230 に答える
30
<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);
}));
于 2012-08-22T12:48:17.610 に答える
7
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);
});
于 2016-04-14T12:35:40.183 に答える
7
このトピックが古いことは承知していますが、私の答えは多くの人にとって役立つと思います。
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();
于 2016-10-16T12:17:40.807 に答える
1
jquery.selectboxes.jsプラグインには sort メソッドがあります。プラグインを実装するか、コードに飛び込んでオプションを並べ替える方法を確認できます。
于 2012-08-22T12:39:27.170 に答える
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;
}
于 2017-05-27T12:33:03.307 に答える
1
はい、オプションをテキストで並べ替えて、選択ボックスに追加することができます。
function NASort(a, b) {
if (a.innerHTML == 'NA') {
return 1;
}
else if (b.innerHTML == 'NA') {
return -1;
}
return (a.innerHTML > b.innerHTML) ? 1 : -1;
};
于 2016-07-15T07:17:25.800 に答える