본문 바로가기
jQuery

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

by eqzero 2009. 5. 3.
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(인사이트)

'jQuery' 카테고리의 다른 글

jQuery의 live() 함수.  (0) 2009.08.30
jQuery 성능 조정  (0) 2009.08.14
유용한 jQuery plugin  (0) 2009.04.03
Release:jQuery 1.3  (0) 2009.01.19
jQuery Cheatsheet  (0) 2008.12.26