2009-03-20 4 views

답변

3

옵션 값과 텍스트를 배열에 넣고 배열을 정렬 한 다음 기존 옵션 요소를 정렬 된 배열로 구성된 새 요소로 바꿉니다.

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

을하지만 그것은 당신이 달성하기 위해 노력하고 왜, 무엇을 물어 아마도 더 나은 :

+0

여기는 내가 어떻게 찾았는지 발견 한 링크입니다. http://www.w3schools.com/jsref/jsref_sort.asp – mrTomahawk

43

이 같은 jQuery를 뭔가를 사용할 수 있습니다. = "내 목록-ID"

< 선택 ID>로 정렬됩니다 :

SortOptions("#my-list-id"); 

또는

+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

. 값 비교는 숫자에만 적용됩니다. lexicographic 분류 masto의 답변에서 비교를 참조하십시오. – bobince

+2

미안하지만, 당신의 코멘트의 요점은 무엇인지 이해하지 못합니다. 정확히 "옵션" "텍스트"에 대한 "사전 편집 비교"를 정확히하는 숫자 비교 아래에서 한 줄을 보았을 것입니다. : – altblue

+0