So zeigen Sie eine Seite mit einer sortierten drop-down-Liste?

Ich habe eine select-Liste

HTML:

<select id="select_zone">
  <option value="north">North</option>
  <option value="east">East</option>
  <option value="south">South</option>
  <option value="west">West</option>
</select>

Nun möchte ich die Elemente in der Liste zu erscheinen, in einer geordneten Art und Weise mit Hilfe von jquery. Ich sollte in der Lage sein, um Elemente hinzuzufügen, die in der Liste in den html-code manuell (in zufälliger Reihenfolge). ABER Sie sollten erscheinen alphabetisch sortiert in der browser-Seite.

Ich brechen meinen Kopf und getan haben eine Menge von R&D. Aber nicht in der Lage einen Weg zu finden, Sortieren Sie die dropdpwnlist an der Zeit die Seite geladen wird.
Bitte um Hilfe!!

InformationsquelleAutor user2473532 | 2013-06-11
  1. 8

    hier ist eine funktionierende Geige code aus :
    http://sebastienayotte.wordpress.com/2009/08/04/sorting-drop-down-list-with-jquery/

    http://jsfiddle.net/Rz6xv/

    code: 

    function sortDropDownListByText() {
    //Loop for each select element on the page.
    $("select").each(function() {

        //Keep track of the selected option.
        var selectedValue = $(this).val();

        //Sort all the options by text. I could easily sort these by val.
        $(this).html($("option", $(this)).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
        }));

        //Select one option.
        $(this).val(selectedValue);
    });
}
    • perfekte Antwort, die ich suchte, gute, das du gegeben fiddler
    InformationsquelleAutor CodeToad
  2. 0

    schreiben Sie eine Methode, und rufen Sie auf Dokument bereit()

    function sortMycombo() {
   $("#select_zone").html($('#select_zone option').sort(function(x, y) {
         return $(x).text() < $(y).text() ? -1 : 1;
   }))
   $("#select_zone").get(0).selectedIndex = 0;
   e.preventDefault();
});
    • Für '$("#select_zone").html " das sagt nicht aufgelöste Funktion oder Methode Namen
    • Ich verwende als IDE Webstorm
    • Und für wie jquery benutzt habe ich ein cdn '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>'
    • Ich bin mir nicht sicher, ob dies der richtige Weg, es zu tun!
    InformationsquelleAutor Suresh Atta
  3. 0

    Könnten Sie jQuery verwenden, und so etwas wie dieses:

    $("#id").html($("#id option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))
    InformationsquelleAutor DevZer0
Schreibe einen Kommentar