dynamic selectbox with getJSON

흔히 쇼핑몰이나 기타 웹사이트를 보면 selectbox 대분류 소분류로 나뉘어 대분류를 선택하게 되면
소분류는 대분류와 연관된 카테고리가 나오게 된다.

이런 기능을 데이터 형식은 json으로 처리를 하며 jquery getJSON 메소드를 이용하여 dynamic하게
소분류 카테고리를 만들어 본다.


그림1 첫 대분류 selectbox 화면

그림2 대분류 선택 이후 소분류 selectbox 추가된 화면

json 데이터 형식

[
     {"F_TMPL_CODE":"045001001093", "F_TMPL_NAME":"Dream"},
     {"F_TMPL_CODE":"045001001588", "F_TMPL_NAME":"Green Day"},
     {"F_TMPL_CODE":"045001001487", "F_TMPL_NAME":"Happy Day"},
      .......
     {"F_TMPL_CODE":"045001001487", "F_TMPL_NAME":"Happy Day"}
]

대분류 selectbox의 onchage이벤트 시 아래의 자바스크립트 함수를 호출하게 한다.

function fnLoad(obj)
{
     var select = document.createElement("select");    //selectbox 생성
     select.name = "soname";                                   //name지정  
     //현재 소분류 selectbox가 있는지 여부를 확인한다. 있다면 기존 selectbox remove
     if(document.getElementById("test").innerHTML != "")
          document.getElementById("test").removeChild(document.getElementById("soname"));
     
     //대분류에 대한 소분류 json데이터를 얻기 위하여 getJSON으로 호출
     $.getJSON("testURL.jsp?prodcode="+obj.value, function(data){
          $.each(data, function(index, entry){
               var objOpt = document.createElement("option");     //option Element생성
               objOpt.value = entry["F_TMPL_CODE"];                //entry는 호출된 data를 가지고 있다. 
               objOpt.innerText = entry["F_TMPL_NAME"];
               select.appendChild(objOpt);                                //생성된 select Element에 Option을 추가
          });
     });
     document.getElementById("test").appendChild(select);     //생성된 select Element를 test Div태그에 추가
}

getJSON에 대하여 더 자세히 알고 싶다면 아래 링크를 참조한다.
http://api.jquery.com/jQuery.getJSON/

아래는 HTML이다.

<!-- 대분류 -->
<select name="daename" onChange="ajaxLoadTmpl(this);">
<option value="" selected>상품분류</option>
<option value="0000001" >대분류1</option>
   ......
<option value="0000009" >대분류2</option>
</select>
<!-- 소분류 -->
<div id="test"></div>