jQuery selectbox 정렬

for(var j=0; j<data[sListNm].length; j++) {
    sOption += "<option value=" + data[sListNm][j].CODE + ">" + data[sListNm][j].VAL + "</option>";
}
 
$(".standard").append("<dl><dt>"+sFindAlias+"</dt><dd><select class='select' style='width:88%;'"
                        +" name='"+data["addFind"][i]+"' id='"+sFind+"'>"
                        +"<option value=''></option>"+sOption+"</select></dd></dl>");

위와같이 동적으로 만들어 놓은 셀렉트박스의 옵션들(한글 가능)을 정렬하고 싶을때!

for(var i=0; i<$(".select").length; i++){
 
    //여러개의 셀렉트 박스가 존재하기 때문에 $('.select').eq(i) 로 하나씩 가져온다.
    var oOptionList = $(".select").eq(i).find('option');
     
    oOptionList.sort(function(a, b){
        if (a.text > b.text) return 1;
        else if (a.text < b.text) return -1;
        else {
            if (a.value > b.value) return 1;
            else if (a.value < b.value) return -1;
            else return 0;
        }
    });
 
    $(".select").eq(i).html(oOptionList);
}

소스코드를 실행하면 정렬은 제대로 되어 있지만 마지막요소가 selected 되어 나타난다.

이 문제는 html() 내부에서 html을 덮어씌우기 전에 엘리먼트의 내부를 비우기 위해 호출하는 empty() 의 문제라고 한다.

( empty() 내부에서 firstChild 가 없어질 때까지 removeChild() 를 해주는 부분 때문. )

따라서 selected 속성을 가진 option 이 지워지면 자동으로 그 다음 option 이 selected 되어버린다.

*** 해결방법

1.  jQuery core 의 empty() 를 수정

2. 기존 option 리스트를 그대로 사용하지 않고 처음부분에 option 을 만든것 처럼 동적으로 추가

3. 원하는 값으로 selected 세팅

$(".select:eq("+i+") option:eq(0)").attr('selected', 'selected');

*** 참고 : http://bloodguy.tistory.com