Sắp xếp danh sách thả xuống bằng cách sử dụng Javascript

Question

tôi muốn sắp xếp các mục thả xuống bằng javascript, bất kỳ ai cũng có thể cho tôi biết cách thực hiện việc này.

Answer 1

Đặt giá trị tùy chọn và văn bản vào một mảng, sắp xếp mảng, sau đó thay thế các phần tử tùy chọn hiện có bằng các phần tử mới được tạo từ mảng được sắp xếp.

Answer 2

Bạn có thể sử dụng jQuery và một cái gì đó như thế này:

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

Nhưng nó có thể tốt hơn để hỏi tại sao và những gì bạn đang cố gắng để đạt được.

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>