jQuery 로 미정렬된 DropDownList 를 Sort 되도록 구현하기.

jQuery 를 이용해서 미정렬된 options 값들을 정렬된 상태로 보여지도록 구현하는것을 알아보고자 한다.

 <select name="DDL" id="DDL">
 <option value="3">Item3</option>
 <option value="1">Item1</option>
 <option value="4">Item4</option>
 <option value="5">Item5</option>
 <option value="2">Item2</option> 
</select>

<input type="submit" name="btnSort" value="Sort" id="btnSort" />

    <script src='../Scripts/jquery-1.3.2.min.js'  type='text/javascript'>
    </script>
 
    <script type="text/javascript">
        $(function() {
            $('input[id$=btnSort]').click(function(e) {
                e.preventDefault();
                var sortedDdl = $.makeArray($('select[id$=DDL] option'))
                                       .sort(function(o, n) {
                                       return $(o).text() < $(n).text() ? -1 : 1;
                });
                $("select[id$=DDL]").html(sortedDdl).val("1");
                $("#para").html("Items were Sorted!");
                $(this).attr("disabled", "disabled");
            });
        });
    </script>

$.makeArray 를 이용해서 배열로 convert 했으며, sort() 함수를 이용하여 배열을 정렬시킨다.

$("select[id$=DDL]").empty().html(sorted)

DropDownList 에 내용을 empty 하고, 현재 존재한 options 값들을 정렬된 options 로 치환하도록 .html(sorted) 하였다.

 val("1") 의미는 정렬되고 나서, 첫번째 options 가 선택되도록 조치한 것이다.