Sortieren, wählen Sie Menü alphabetisch?

Habe ich die folgenden select-Menü (jsFiddle):

<select>
  <option value="volvo">Cars</option>
  <option value="saab">------------</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Verwendung von Javascript, wie kann ich das neu-Sortieren Sie die Liste alphabetisch, mit Ausnahme der ersten 2 Optionen (Cars und -------), die müssen bleiben an der Spitze? Vielen Dank im Voraus für jede Hilfe.

Soweit die Darstellung einer überschrift in der <select> Liste, die Sie in Aussehen sollte mit HTML <optgroup> Funktionalität. So könnte man alphabetisch alle Optionen und die gewünschte Wirkung haben. w3schools.com/tags/tag_optgroup.asp

InformationsquelleAutor Skizit | 2011-03-09

11

Als ein purist, ich würde sagen, dass zu keinem Zeitpunkt wurde jQuery ausdrücklich erwähnt oder gefragt wird), kann es nicht in Gebrauch ist in diesem Projekt für einen oder anderen Grund. Hier ist ein Beispiel mit reinem javascript.
```
function sortlist(){

 var cl = document.getElementById('carlist');
 var clTexts = new Array();

 for(i = 2; i < cl.length; i++){
    clTexts[i-2] =
        cl.options[i].text.toUpperCase() + "," +
        cl.options[i].text + "," +
        cl.options[i].value + "," +
        cl.options[i].selected;
 }

 clTexts.sort();

 for(i = 2; i < cl.length; i++){
    var parts = clTexts[i-2].split(',');

    cl.options[i].text = parts[1];
    cl.options[i].value = parts[2];
    if(parts[3] == "true"){
        cl.options[i].selected = true;
    }else{
       cl.options[i].selected = false;
    }
 }
}

sortlist();
```
http://jsfiddle.net/GAYvL/7/

Aktualisiert zu Fall neutral.
- Ich mag die Arbeit mit jQuery, weil es so einfach ist...das ist auch der größte Sturz. Kein Grund zum hinzufügen von zusätzlichen overhead - würde ich vote für deine Antwort.
- jQuery ist toll, und ich würde stark befürworten seine Nutzung ... aber ich würde mich schuldig fühlen, wenn jemand zum hinzufügen von jQuery, um ein Projekt zu unterstützen, so etwas wie dieses ... danke für den Vertrauensbeweis 🙂
- Diese Setzen die Großbuchstaben vor Kleinbuchstaben führt zu so etwas wie ABCabc eher als AaBbCc
- Ich habe eine leichte Modifikation zu machen, als in der Nähe von Fall neutral, wie es wahrscheinlich werden zu müssen.
- beachten Sie, dass dies nicht behalten selected - Attribut auf die richtige option
- Dieser schlägt fehl, wenn der Wert der <option> hat, ein Komma in ihm.
InformationsquelleAutor Jeff Parker

Ich würde anfangen, indem ich einen Klasse Namen alle Einträge, die ich Sortieren möchten, und geben und ID zu wählen:

 <select id="sortableCars">
   <option value="volvo">Cars</option>
   <option class="sortMe" value="saab">------------</option>
   <option class="sortMe" value="volvo">Volvo</option>
   <option class="sortMe" value="saab">Saab</option>
   <option class="sortMe" value="mercedes">Mercedes</option>
   <option class="sortMe" value="audi">Audi</option>
 </select>

als für die javascript -

 var mylist = $('#sortableCars');
 var listitems = mylist.children('option.sortMe').get();
 listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
 })
 $.each(listitems, function(idx, itm) { mylist.append(itm); });

Sie erhalten eine wählen, mit der sowohl die ungeordnete Optionen und den bestellten Optionen diese Weise, da Sie mit mylist.append().
In der Nähe, aber die JS funktioniert nicht ganz richtig in meinen Tests. Ändern listitems zu $('#sortableCars > .sortMe') und entfernen der sortMe - Klasse aus der '- - - - - - - ' - option löst meine Probleme.
Ich festen, wählen Sie nur diejenigen mit der Klasse "sortMe'. Lustig, wie können Sie verpassen die wichtige details...

InformationsquelleAutor Eric Di Bari

Mein Erster Ansatz war, ähnlich wie Koolinc ist, mit Array.der Prototyp.Scheibe konvertieren <select> element-Kinder-NodeList in ein array. Dies bedeutet jedoch nicht, funktionieren in Internet Explorer 8 und niedriger, also änderte ich es zu extrahieren, zu Sortieren und dann neu einfügen:

var sel = document.getElementsByTagName("select")[0],
    opts = [];

//Extract the elements into an array
for (var i=sel.options.length-1; i >= 2; i--)
    opts.push(sel.removeChild(sel.options[i]));

//Sort them
opts.sort(function (a, b) { 
    return a.innerHTML.localeCompare(b.innerHTML);
});

//Put them back into the <select>
while(opts.length)
    sel.appendChild(opts.shift());

Arbeiten demo: http://jsfiddle.net/3YjNR/2/

Funktioniert nicht mit <optgroup>. 🙁

InformationsquelleAutor Andy E

Dies ist nur eine weitere generische answser basierend auf @Jeff Parker ist einer!

function sortSelect(select, startAt) {
    if(typeof startAt === 'undefined') {
        startAt = 0;
    }

    var texts = [];

    for(var i = startAt; i < select.length; i++) {
        texts[i] = [
            select.options[i].text.toUpperCase(),
            select.options[i].text,
            select.options[i].value
        ].join('|');
    }

    texts.sort();

    texts.forEach(function(text, index) {
        var parts = text.split('|');

        select.options[startAt + index].text = parts[1];
        select.options[startAt + index].value = parts[2];
    });
}