2009/05/03 20:59
jQuery $.getJSON 사용한 동적 SELECTBOX구현 jQuery2009/05/03 20:59
jQuery에서 서버로 GET방식의 요청을 보내고 응답을 JSON으로 받는 $.getJSON 함수를 제공한다.
getJSON을 사용해서 간단한 동적 selectbox를 구현해보자. -_-/
우선 대상 getData.jsp는 아래와 같은 JSON 형식이다.
참고도서 : jQuery in Action(인사이트)
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 $.getJSON 사용한 동적 SELECTBOX구현 (0) | 2009/05/03 |
| 유용한 jQuery plugin (0) | 2009/04/03 |
| Release:jQuery 1.3 (0) | 2009/01/19 |
| jQuery Cheatsheet (0) | 2008/12/26 |
댓글을 달아 주세요