select要素のアイテムをソートする簡単な方法はありますか? または、javascript を作成する必要がありますか?
アイデアをください。
<select size="4" name="lstALL" multiple="multiple" id="lstALL" tabindex="12" style="font-size:XX-Small;height:95%;width:100%;">
<option value="0"> XXX</option>
<option value="1203">ABC</option>
<option value="1013">MMM</option>
</select>
これでうまくいきます。document.getElementById('lstALL')リストをソートする必要がある場合は、 select 要素を渡すだけです。
function sortSelect(selElem) {
var tmpAry = new Array();
for (var i=0;i<selElem.options.length;i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort();
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i=0;i<tmpAry.length;i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}
このソリューションは、jquery を使用して私にとって非常にうまく機能しました。他のページより前にこのページを見つけたので、ここで相互参照すると思いました。他の誰かが同じことをするかもしれません。
$("#id").html($("#id option").sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))
Marco Lazzeri と Terre Porter によって提供された回答 (この回答が役立つ場合は投票してください) を使用して、選択した値を保持する (おそらくイベント ハンドラーや添付データは保持しない) わずかに異なるソリューションを思いつきました。jQuery .
// save the selected value for sorting
var v = jQuery("#id").val();
// sort the options and select the value that was saved
j$("#id")
.html(j$("#id option").sort(function(a,b){
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;}))
.val(v);
const optionNodes = Array.from(selectNode.children);
const comparator = new Intl.Collator(lang.slice(0, 2)).compare;
optionNodes.sort((a, b) => comparator(a.textContent, b.textContent));
optionNodes.forEach((option) => selectNode.appendChild(option));
私の使用例は、ロケール対応の並べ替えを使用して国選択ドロップダウンをローカライズすることでした。これは 250 以上のオプションで使用され、私のマシンでは最大 10ミリ秒のパフォーマンスを発揮しました。
W3C FAQから：
多くのプログラミング言語には、ドロップダウンボックスのようなデバイスがあり、アイテムのリストを機能の一部として表示する前に並べ替えることができますが、HTMLの<select>関数にはそのような機能はありません。受け取った順序で<options>が一覧表示されます。
静的なHTMLドキュメントの場合は手動で並べ替えるか、動的なドキュメントの場合はJavascriptまたはその他のプログラムによる並べ替えを使用する必要があります。
別のオプション：
function sortSelect(elem) {
var tmpAry = [];
// Retain selected value before sorting
var selectedValue = elem[elem.selectedIndex].value;
// Grab all existing entries
for (var i=0;i<elem.options.length;i++) tmpAry.push(elem.options[i]);
// Sort array by text attribute
tmpAry.sort(function(a,b){ return (a.text < b.text)?-1:1; });
// Wipe out existing elements
while (elem.options.length > 0) elem.options[0] = null;
// Restore sorted elements
var newSelectedIndex = 0;
for (var i=0;i<tmpAry.length;i++) {
elem.options[i] = tmpAry[i];
if(elem.options[i].value == selectedValue) newSelectedIndex = i;
}
elem.selectedIndex = newSelectedIndex; // Set new selected index after sorting
return;
}
私も同じ問題を抱えていました。私が思いついたjQueryソリューションは次のとおりです。
var options = jQuery.makeArray(optionElements).
sort(function(a,b) {
return (a.innerHTML > b.innerHTML) ? 1 : -1;
});
selectElement.html(options);
選択したアイテムを一番上に表示したいことを除いて、同様の問題があり、どのアイテムが選択されたかをクリアしたくありませんでした (複数選択リスト)。私のはjQueryベースです...
function SortMultiSelect_SelectedTop(slt) {
var options =
$(slt).find("option").sort(function (a, b) {
if (a.selected && !b.selected) return -1;
if (!a.selected && b.selected) return 1;
if (a.text < b.text) return -1;
if (a.text > b.text) return 1;
return 0;
});
$(slt).empty().append(options).scrollTop(0);
}
一番上を選択しないと、このようになります。
function SortMultiSelect(slt) {
var options =
$(slt).find("option").sort(function (a, b) {
if (a.text < b.text) return -1;
if (a.text > b.text) return 1;
return 0;
});
$(slt).empty().append(options).scrollTop(0);
}
はい、DOKには正しい答えがあります... HTMLを作成する前に結果を事前に並べ替えるか（動的であり、出力に責任があると想定）、またはjavascriptを作成します。
JavascriptのSortメソッドはここであなたの友達になります。選択リストから値を取り出して並べ替え、元に戻すだけです:-)
オプション配列の .value で並べ替えることができず、数値だったので、このバブル ソートを使用しました。このようにして、それらを適切に注文しました。あなたにも役立つことを願っています。
function sortSelect(selElem) {
for (var i=0; i<(selElem.options.length-1); i++)
for (var j=i+1; j<selElem.options.length; j++)
if (parseInt(selElem.options[j].value) < parseInt(selElem.options[i].value)) {
var dummy = new Option(selElem.options[i].text, selElem.options[i].value);
selElem.options[i] = new Option(selElem.options[j].text, selElem.options[j].value);
selElem.options[j] = dummy;
}
}
function call() {
var x = document.getElementById("mySelect");
var optionVal = new Array();
for (i = 0; i < x.length; i++) {
optionVal.push(x.options[i].text);
}
for (i = x.length; i >= 0; i--) {
x.remove(i);
}
optionVal.sort();
for (var i = 0; i < optionVal.length; i++) {
var opt = optionVal[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
x.appendChild(el);
}
}
アイデアは、選択ボックスのすべての要素を配列に引き出し、オーバーライドを避けるために選択ボックスの値を削除し、配列をソートしてから、ソートされた配列を選択ボックスにプッシュバックすることです
Í これはより良いオプションだと思います (@Matty のコードを使用して改善しました!):
function sortSelect(selElem, bCase) {
var tmpAry = new Array();
bCase = (bCase ? true : false);
for (var i=0;i<selElem.options.length;i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
if (bCase)
tmpAry.sort(function (a, b) {
var ret = 0;
var iPos = 0;
while (ret == 0 && iPos < a.length && iPos < b.length)
{
ret = (String(a).toLowerCase().charCodeAt(iPos) - String(b).toLowerCase().charCodeAt(iPos));
iPos ++;
}
if (ret == 0)
{
ret = (String(a).length - String(b).length);
}
return ret;
});
else
tmpAry.sort();
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i=0;i<tmpAry.length;i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}
方向 (「asc」または「desc」) の選択、オプション値で比較を行うかどうか (true または false)、および比較の前に先頭と末尾の空白を削除するかどうかを簡単にまとめました。 (ブール値)。
この方法の利点は、選択した選択が保持され、他のすべての特別なプロパティ/トリガーも保持される必要があることです。
function sortOpts(select,dir,value,trim)
{
value = typeof value == 'boolean' ? value : false;
dir = ['asc','desc'].indexOf(dir) > -1 ? dir : 'asc';
trim = typeof trim == 'boolean' ? trim : true;
if(!select) return false;
var opts = select.getElementsByTagName('option');
var options = [];
for(var i in opts)
{
if(parseInt(i)==i)
{
if(trim)
{
opts[i].innerHTML = opts[i].innerHTML.replace(/^\s*(.*)\s*$/,'$1');
opts[i].value = opts[i].value.replace(/^\s*(.*)\s*$/,'$1');
}
options.push(opts[i]);
}
}
options.sort(value ? sortOpts.sortVals : sortOpts.sortText);
if(dir == 'desc') options.reverse();
options.reverse();
for(var i in options)
{
select.insertBefore(options[i],select.getElementsByTagName('option')[0]);
}
}
sortOpts.sortText = function(a,b) {
return a.innerHTML > b.innerHTML ? 1 : -1;
}
sortOpts.sortVals = function(a,b) {
return a.value > b.value ? 1 : -1;
}
これを試してください...解決策が得られることを願っています:
function sortlist_name()
{
var lb = document.getElementById('mylist');
arrTexts = new Array();
newTexts = new Array();
txt = new Array();
newArray =new Array();
for(i=0; i<lb.length; i++)
{
arrTexts[i] = lb.options[i].text;
}
for(i=0;i<arrTexts.length; i++)
{
str = arrTexts[i].split(" -> ");
newTexts[i] = str[1]+' -> '+str[0];
}
newTexts.sort();
for(i=0;i<newTexts.length; i++)
{
txt = newTexts[i].split(' -> ');
newArray[i] = txt[1]+' -> '+txt[0];
}
for(i=0; i<lb.length; i++)
{
lb.options[i].text = newArray[i];
lb.options[i].value = newArray[i];
}
}
/***********revrse by name******/
function sortreverse_name()
{
var lb = document.getElementById('mylist');
arrTexts = new Array();
newTexts = new Array();
txt = new Array();
newArray =new Array();
for(i=0; i<lb.length; i++)
{
arrTexts[i] = lb.options[i].text;
}
for(i=0;i<arrTexts.length; i++)
{
str = arrTexts[i].split(" -> ");
newTexts[i] = str[1]+' -> '+str[0];
}
newTexts.reverse();
for(i=0;i<newTexts.length; i++)
{
txt = newTexts[i].split(' -> ');
newArray[i] = txt[1]+' -> '+txt[0];
}
for(i=0; i<lb.length; i++)
{
lb.options[i].text = newArray[i];
lb.options[i].value = newArray[i];
}
}
function sortlist_id() {
var lb = document.getElementById('mylist');
arrTexts = new Array();
for(i=0; i<lb.length; i++) {
arrTexts[i] = lb.options[i].text;
}
arrTexts.sort();
for(i=0; i<lb.length; i++) {
lb.options[i].text = arrTexts[i];
lb.options[i].value = arrTexts[i];
}
}
/***********revrse by id******/
function sortreverse_id() {
var lb = document.getElementById('mylist');
arrTexts = new Array();
for(i=0; i<lb.length; i++) {
arrTexts[i] = lb.options[i].text;
}
arrTexts.reverse();
for(i=0; i<lb.length; i++) {
lb.options[i].text = arrTexts[i];
lb.options[i].value = arrTexts[i];
}
}
</script>
ID<a href="javascript:sortlist_id()"> ▲ </a> <a href="javascript:sortreverse_id()">▼</a> | Name<a href="javascript:sortlist_name()"> ▲ </a> <a href="javascript:sortreverse_name()">▼</a><br/>
<select name=mylist id=mylist size=8 style='width:150px'>
<option value="bill">4 -> Bill</option>
<option value="carl">5 -> Carl</option>
<option value="Anton">1 -> Anton</option>
<option value="mike">2 -> Mike</option>
<option value="peter">3 -> Peter</option>
</select>
<br>
Marco による JQuery の例ほどきれいではありませんが、プロトタイプを使用すると (より洗練されたソリューションがない可能性があります)、次のようになります。
function sort_select(select) {
var options = $A(select.options).sortBy(function(o) { return o.innerHTML });
select.innerHTML = "";
options.each(function(o) { select.insert(o); } );
}
そして select 要素を渡すだけです:
sort_select( $('category-select') );
function sortItems(c) {
var options = c.options;
Array.prototype.sort.call(options, function (a, b) {
var aText = a.text.toLowerCase();
var bText = b.text.toLowerCase();
if (aText < bText) {
return -1;
} else if (aText > bText) {
return 1;
} else {
return 0;
}
});
}
sortItems(document.getElementById('lstALL'));
jQueryでそれを行う別の方法：
// sorting;
var selectElm = $("select"),
selectSorted = selectElm.find("option").toArray().sort(function (a, b) {
return (a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) ? 1 : -1;
});
selectElm.empty();
$.each(selectSorted, function (key, value) {
selectElm.append(value);
});