티스토리 뷰

Web Development/JQuery

jquery로 select box 만들어 보기

dev ms 2016. 3. 29. 22:47
반응형
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> jQuery_Sample </title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/basic.css">
<script type="text/javascript">
$(document).ready(function(){
 setGridTag();
});
/* 그리드의 뿌려질 ROW태그 저장 */
function setGridTag(){
 var gridId = $("[gridTag='true']").attr("id");  //그리드가 표현될 태그의 ID
 
 var gridRowTag = $("#"+gridId).html();   //그리드가 표현될 ROW 태그
 $("body").data(gridId, gridRowTag);    //key, value로 저장하여 원본태그 값을 저장한다.
 $("#"+gridId).children().remove();
 
 //------------------ 셀렉트 박스 부분 ----------------------------------------------
 var selectId = $("[selectTag='true']").attr("id");  //셀렉트가 표현될 태그의 ID
 var selectOptionTag = $("#"+selectId).html();
 $("body").data(selectId, selectOptionTag);    //key, value로 저장하여 원본태그 값을 저장한다.
 $("#"+selectId).html('');
 $("#"+selectId).html('<option value=""> 값을 선택해주세요 </option>');
//--------------------------- 끝 ----------------------------------------------------
}
/* ajax json 호출 */
function getJson(){
 $.ajax({
  type: "post",
  url: "sample_json.html",
  data: "",
  dataType: "json",
  success: function(json){
   //alert(JSON.stringify(json));
   gridView("grid", json.data); // 첫번째 파라메터 : 그리드가 표현될 ID, 두번째 파라메터 : json 데이터
   makeSelect("select1",json.data);
  }
 });
}
/* json Grid 구현 */
function gridView(gridTagId, data){
   $("#" + gridTagId).html(''); 
  for ( var i = 0; i < data.length; i++) {
   var gridTag = $("body").data(gridTagId); //setGridTag 함수에서 저장된 ROW 태그 GET
   for (var prop in data[i]) {
    gridTag = gridTag.split("COL_NAME_"+prop).join(data[i][prop]);  
   }
   $("#" + gridTagId).append(gridTag); 
  }
  
}
function makeSelect(selectTagId, data){
  for ( var i = 0; i < data.length; i++) {
   var selectTag = $("body").data(selectTagId); //setGridTag 함수에서 저장된 ROW 태그 GET
   for (var prop in data[i]) {
    selectTag = selectTag.split("COL_NAME_"+prop).join(data[i][prop]);  
       //alert(selectTag.split("COL_NAME_"+prop));
   }
   $("#" + selectTagId).append(selectTag); 
  }
}

</script>
</head>
<body>
<div id="MainLayer">
 <input type="button" value="ajax json 테이블 생성" onClick="getJson()" />
 <table width="500px" border="1px">
  <caption>json 그리드 예제</caption>
  <thead>
   <tr>
    <td>번호</td>
    <td>제목</td>
    <td>글쓴이</td>
   </tr>
  </thead>
  <tbody id="grid" gridTag="true">
   <tr>
    <td>COL_NAME_NUMBER</td>
    <td>COL_NAME_TITLE</td>
    <td>COL_NAME_USER_ID</td>
   </tr>
  </tbody>
 </table>
 
 <select id="select1" name="select1" selectTag="true">
    <option value='COL_NAME_TITLE'>COL_NAME_NUMBER(COL_NAME_USER_ID)</option>
 </select>
</div>
</body>
</html>


반응형
저작자표시

'Web Development > JQuery' 카테고리의 다른 글

jQuery.each() break; 방법  (0) 2016.03.29
jQuery Custom function 예제  (0) 2016.03.29
jQuery 다른 라이브러리에서 코드 빌려쓰기  (0) 2016.03.29
두개의 다른 라이브러리간 충돌 발생시 해결 방법 (jQuery cookbook 예제)  (0) 2016.03.29
jQuery $.data() 예제  (0) 2016.03.29