jQuery $.getJSON 사용한 동적 SELECTBOX구현

jQuery에서 서버로 GET방식의 요청을 보내고 응답을 JSON으로 받는 $.getJSON 함수를 제공한다.
getJSON을 사용해서 간단한 동적 selectbox를 구현해보자. -_-/

우선 대상 getData.jsp는 아래와 같은 JSON 형식이다.

<%
   // getJSON을 사용시 callback파라미터를 자동으로 붙여주는데 이 callback으로 감싸줘야 한다.
     String callBack = request.getParameter("callback"); 
%>


<%=callBack%>(


[
    {
        "text" : "테스트01",
        "value" : "01"
    },
    {
        "text" : "테스트02",
        "value" : "02"
    } 
])

그럼 저 getData.jsp의 내용을 가져와 적용할 실제 페이지내용은 아래와 같다


 
<script type="text/javascript">


 $(function () { 


   var params = { seq : 1 }; //파라미터 선언 
 
  $.getJSON("getData.jsp?callback=?", params, function (returnData, textStatus){


       if(textStatus == 'success'){     

          //sample 객체에 SELECT 옵션내용 추가.


          $("#sample").loadSelect(returnData);


       } else { 


           alert("ERROR!");
           return;
        } 
       });  
 });




  //동적 SELECTBOX 구현을 위한 사용자 함수
  (function($) {
   //SELECT OPTION 삭제




   $.fn.emptySelect = function() {
       return this.each(function(){
         if (this.tagName=='SELECT') this.options.length = 0;
       });
    }




    //SELECT OPTION 등록
    $.fn.loadSelect = function(optionsDataArray) {
       return this.emptySelect().each(function(){
         if (this.tagName=='SELECT') {
             var selectElement = this;
             $.each(optionsDataArray,function(idx, optionData){
                 var option = new Option(optionData.text, optionData.value);
                 if ($.browser.msie) {
                     selectElement.add(option);
                 }
                 else {
                     selectElement.add(option,null);
                 }
             });
         }
      });
    }
  })(jQuery);
</script>

<select id="sample">


</select>
..편집기에서 붙였더니 들여쓰기가 다 엉망이 됐다.ㅡㅜ...




참고도서 : jQuery in Action(인사이트)