Javascript, um den Inhalt des ausgewählten Elements zu sortieren

Dies wird den trick tun. Einfach übergeben Sie Ihre select-element a la: document.getElementById('lstALL') wenn Sie müssen Sie Ihre Liste sortiert werden soll.

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;
}

InformationsquelleAutor der Antwort Matty

Aus der W3C-FAQ:

Obwohl viele Programmiersprachen haben Geräte, wie drop-down-Boxen, die die Fähigkeit zum Sortieren einer Liste der Einträge vor der Anzeige die Sie als Teil Ihrer Funktionalität, die HTML <select> die Funktion hat keine solche Funktionen. Es listet die <Optionen> in der Reihenfolge des Eingangs.

Würden Sie haben, um Sie zu Sortieren, die von hand bei einer statischen HTML-Dokument, oder resort, um Javascript oder eine andere programmatische Art für ein dynamisches Dokument.

InformationsquelleAutor der Antwort Bill the Lizard

Andere Möglichkeit:

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;
}

InformationsquelleAutor der Antwort user684486

Dies ist eine Neukompilierung meine 3 Lieblings-Antworten auf diesem board:

• jOk die beste und einfachste Antwort.
• Terry Porter ist einfach jQuery-Methode.
• SmokeyPHP die konfigurierbare Funktion.

Die Ergebnisse sind einfach zu bedienen, und leicht konfigurierbar Funktion.

Erste argument kann ein Objekt auswählen, wird die ID eine select-Objekt, oder ein array mit mindestens 2 Dimensionen.

Zweite argument ist optional. Standardmäßig ist die Sortierung nach die option text, index 0. Übergeben werden können, alle anderen index so zu Sortieren, dass. Übergeben werden kann 1, oder der text "Wert", Sortieren Sie nach Wert.

Art von text Beispiele (alle würde eine Sortierung nach text):

 sortSelect('select_object_id');
 sortSelect('select_object_id', 0);
 sortSelect(selectObject);
 sortSelect(selectObject, 0);

Art von Wert (würden alle Art-by-value):

 sortSelect('select_object_id', 'value');
 sortSelect('select_object_id', 1);
 sortSelect(selectObject, 1);

Sortieren von Arrays, die durch einen anderen index:

var myArray = [
  ['ignored0', 'ignored1', 'Z-sortme2'],
  ['ignored0', 'ignored1', 'A-sortme2'],
  ['ignored0', 'ignored1', 'C-sortme2'],
];

sortSelect(myArray,2);

Diese Letzte wird Sortieren das array von index-2, die sortme.

Main Funktion Sortieren

function sortSelect(selElem, sortVal) {

    //Checks for an object or string. Uses string as ID. 
    switch(typeof selElem) {
        case "string":
            selElem = document.getElementById(selElem);
            break;
        case "object":
            if(selElem==null) return false;
            break;
        default:
            return false;
    }

    //Builds the options list.
    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;
    }

    //allows sortVal to be optional, defaults to text.
    switch(sortVal) {
        case "value": //sort by value
            sortVal = 1;
            break;
        default: //sort by text
            sortVal = 0;
    }
    tmpAry.sort(function(a, b) {
        return a[sortVal] == b[sortVal] ? 0 : a[sortVal] < b[sortVal] ? -1 : 1;
    });

    //removes all options from the select.
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }

    //recreates all options with the new order.
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }

    return true;
}

InformationsquelleAutor der Antwort Tony Chiboucas

Í denke, das ist eine bessere option (ich benutze @Matty code und verbessert!):

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;
        }

InformationsquelleAutor der Antwort Matias Perrone

Ich hatte ein ähnliches problem, nur wollte ich die ausgewählten Elemente zu zeigen, bis auf oben, und ich wollte nicht deutlich, welche Elemente ausgewählt wurden (multi-select-Liste). Mir ist jQuery-basiert...

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);
}

Ohne auf ausgewählte top, würde es so Aussehen.

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);
}

InformationsquelleAutor der Antwort colinbashbash

Inspiriert von @Terre Porter ' s Antwort, ich denke, das ist sehr einfach zu implementieren (mit jQuery)

var $options = jQuery("#my-dropdownlist-id > option"); 
//or jQuery("#my-dropdownlist-id").find("option")

$options.sort(function(a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
})

Aber, für Alpha/Numerischen dropdown-Listen :

Inspiriert von : https://stackoverflow.com/a/4340339/1598891

var $options = jQuery(dropDownList).find("option");

var reAlpha = /[^a-zA-Z]/g;
var reNumeric = /[^0-9]/g;
$options.sort(function AlphaNumericSort($a,$b) {
    var a = $a.text;
    var b = $b.text;
    var aAlpha = a.replace(reAlpha, "");
    var bAlpha = b.replace(reAlpha, "");
    if(aAlpha === bAlpha) {
        var aNumeric = parseInt(a.replace(reNumeric, ""), 10);
        var bNumeric = parseInt(b.replace(reNumeric, ""), 10);
        return aNumeric === bNumeric ? 0 : aNumeric > bNumeric ? 1 : -1;
    } else {
        return aAlpha > bAlpha ? 1 : -1;
    }
})

Hoffe, es wird helfen,

InformationsquelleAutor der Antwort RPDeshaies

Nicht ganz so hübsch wie die JQuery-Beispiel von Marco, aber mit den Prototypen (die ich möglicherweise fehlt eine elegantere Lösung) wäre es:

function sort_select(select) {
  var options = $A(select.options).sortBy(function(o) { return o.innerHTML });
  select.innerHTML = "";
  options.each(function(o) { select.insert(o); } );
}

Und dann übergeben Sie es einem select-element:

sort_select( $('category-select') );

InformationsquelleAutor der Antwort Geoff

Versuchen, diese...hoffentlich wird es bieten Ihnen eine Lösung:

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()"> &#x25B2;  </a> <a href="javascript:sortreverse_id()">&#x25BC;</a> |  Name<a href="javascript:sortlist_name()"> &#x25B2;  </a> <a href="javascript:sortreverse_name()">&#x25BC;</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>

InformationsquelleAutor der Antwort Krishna Kamat