2009-03-20 1 views
17

Я хочу сортировать раскрывающиеся элементы с помощью javascript, может ли кто-нибудь сказать мне, как это сделать.Сортировка выпадающего списка с помощью Javascript

+0

Что вы имеете в виду ниспадающего пунктов? – Gumbo

+0

Как вы получаете данные, которые вы заполняете выпадающим списком? – NoahD

ответ

3

Поместите значения параметров и текст в массив, отсортируйте массив, а затем замените существующие элементы элементов новыми элементами, созданными из отсортированного массива.

+0

вот ссылка, которую я нашел, которая показывает, как это сделать: http://www.w3schools.com/jsref/jsref_sort.asp – mrTomahawk

43

Вы можете использовать JQuery и что-то вроде этого:

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

Но это, наверное, лучше спросить, почему и что вы пытаетесь достичь.

+3

+1 основано исключительно на том, что можно было бы сделать без jQuery (см. Ниже) , –

+0

Это отлично подойдет для меня. Мое падение заселено сменой другого падающего вниз. Этот код сделал трюк! Спасибо @mastro – shanabus

+0

работает как сон ... лаконичный ... спасибо! –

6
<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> 
+0

. Сравнение значений будет работать только для чисел; для лексикографической сортировки см. компаратор в ответе масто. – bobince

+2

Извините, но я не понимаю, в чем смысл вашего комментария, так как я уверен, что вы посмотрели ОДНУЮ строку под этим цифровым сравнением, которое делает точно, угадайте, что такое «лексикографическое сравнение» на опциях «текст» ?! :( – altblue

+0

Приятное использование