Sortierung Dropdown-Liste mit Javascript

Question

Ich möchte die Dropdown-Elemente mit Javascript, kann mir jemand sagen, wie dies zu tun.

Answer 1

Setzen Sie die Optionswerte und den Text in ein Array, sortieren Sie das Array und ersetzen Sie die vorhandenen Optionselemente durch neue Elemente, die aus dem sortierten Array erstellt wurden.

Answer 2

Sie könnten jQuery und so etwas wie folgt verwenden:

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

Aber es ist wahrscheinlich besser zu fragen, warum und was Sie erreichen wollen.

Answer 3

<select id="foo" size="10"> 
    <option value="3">three</option> 
    <option value="1">one</option> 
    <option value="0">zero</option> 
    <option value="2">two</option> 
</select> 
<script> 
    // WARN: won't handle OPTGROUPs! 
    var sel = document.getElementById('foo'); 
    // convert OPTIONs NodeList to an Array 
    // - keep in mind that we're using the original OPTION objects 
    var ary = (function(nl) { 
    var a = []; 
    for (var i = 0, len = nl.length; i < len; i++) 
     a.push(nl.item(i)); 
    return a; 
    })(sel.options); 
    // sort OPTIONs Array 
    ary.sort(function(a,b){ 
    // sort by "value"? (numeric comparison) 
    // NOTE: please remember what ".value" means for OPTION objects 
    return a.value - b.value; 
    // or by "label"? (lexicographic comparison) - case sensitive 
    //return a.text < b.text ? -1 : a.text > b.text ? 1 : 0; 
    // or by "label"? (lexicographic comparison) - case insensitive 
    //var aText = a.text.toLowerCase(); 
    //var bText = b.text.toLowerCase(); 
    //return aText < bText ? -1 : aText > bText ? 1 : 0; 
    }); 
    // remove all OPTIONs from SELECT (don't worry, the original 
    // OPTION objects are still referenced in "ary") ;-) 
    for (var i = 0, len = ary.length; i < len; i++) 
    sel.remove(ary[i].index); 
    // (re)add re-ordered OPTIONs to SELECT 
    for (var i = 0, len = ary.length; i < len; i++) 
    sel.add(ary[i], null); 
</script>