[제이쿼리] 동적으로 select box 생성 value selected

안녕하세요. 개발자 여러분.

오늘은 지민이언니가 처음 올리는 게시물입니다. 헤헤

네이버에도 가끔 올리는데...개발자는 구글링이잖아요?

네이버에 올렸던 글 중 젤 조회수가 많았던 게시글입니다. (그래 봤자 이백 명..?ㅎ)

최대한 쉽게 이해할 수 있도록 설명을 좀 주저리 달았어요

도움되시길 바랄게요!~!

 

 

날짜와 요일, selextbox를 동적으로 생성하면서 날짜에 해당되는 데이터까지 selected 되도록 처리해볼게요.

결과물 이예요. 데이터는 가렸어요!

1. 날짜, 요일, 해당 날짜 데이터를 가져와 테이블에 동적으로 차곡차곡 붙여 줍니다.

 

for문을 돌리면서 날짜, 요일, selectbox까지 만들어 줍니다.

 

for(var i = 0; i < data ; i++) { //data = 가져온 데이터 

     $('#tbody') 

     .append($('<tr/>')

     .append($('<td/>').text(data[i].S_DATE)) 

     .append($('<td/>').text(data[i].S_DATE2))

     .append($('<td/>').append(setHolidayCode(data[i].selectboxData)))   //함수호출

 

    );

}

 

selectbox 데이터 셋팅은 setHolidayCode 함수에서 해줄 거예요.

해당 날짜에 selected 할 데이터만 setHolidayCode 함수 파라미터로 보내주세요.

ex) 예를 들면 selecbox를 해당 날짜에 대한 휴무로 선택할 경우

1월 3일이 휴무라면 setHolidayCode 함수에 휴무인 데이터를 보내주면 되겠죠. 그 데이터는 디비에서 가져오는 거니 뭐,.. 알아서.. 디비에서 가져오도록 해주세요. 

 

2. selectbox 셋팅 함수

 

function setHolidayCode(s_data) {

   var $combo = $('<select/>');

   $combo.append($('<option/>',{'value':''}).text('휴뮤 데이터')); //여기는 value 없는 그냥 기본 셋팅 값

   $.each(_rtnData,function(idx,data){ 

         //selectbox에 넣어줄 값들을 each로 돌려 셋팅합니다.

         $combo.append($('<option/>',{'value':_rtnData[idx].COMN_CODE}).text(_rtnData[idx].COMN_CODE_NAME));

   })

  $combo.val(s_data); //여기서 seleted하고 싶은 값을 넣어줌.

  return $combo; //리턴

​

}

 

함수에서 리턴을 해주면 리턴된 selectbox가 tr에 담기겠죠?

그럼 해당하는 날짜를 뿌려주면서 해당 날짜의 휴무의 값까지도 selected 되네요!

 

그럼 도움되셨길 바라요!

끝