여러 개의 Select 값을 하나의 컬럼으로 합치는 방법

여러 개의 Select 값을 하나의 컬럼으로 합치는 일이 간혹 생깁니다. 예를 들어 날짜가 있겠네요.

년월일시분초 이 각각의 값들을 하나의 컬럼으로 합치는 방법을 정리해보겠습니다.

 

요약하자면

• select부분에서 id값으로 제이쿼리에서 읽을 수 있도록 설정합니다.
• submit으로 제이쿼리로 넘겨주면
• var을 통해 만든 변수에 id값을 넣어주고,
• 값을 넣을 컬럼(prom_rec_sdate)에 select id 항목들을 집어 넣습니다.
• 그리고 가장 중요한 부분은 값이 적용될 수 있도록 form태그 안에 hidden 값으로 값을 넣을 컬럼(prom_rec_sdate)을 넣어주면 끝입니다!

 

글은 아무리 잘 써도 모르는 부분에 있어서는 이해가 잘 안되는거같아요 ㅎㅎ

코드를 통해 확인해 보겠습니다.

 

 

 

 

 

 

 

JSP

  

• select부분에서 id값으로 제이쿼리에서 읽을 수 있도록 설정합니다.
• submit으로 제이쿼리로 넘겨주고
• 그리고 가장 중요한 부분은 값이 적용될 수 있도록 form태그 안에 hidden 값으로 값을 넣을 컬럼(prom_rec_sdate)을 넣어주면 끝입니다!

<form id="inputForm"name="inputForm" method="post" onsubmit="return _onSubmit();">
<input type="hidden" id="prom_rec_sdate" name="prom_rec_sdate" value= ""/>
 
<tr>
<th class="active" style="text-align:right">접수기간</th>
<td class="form-inline" >
<span>
<select id="prom_receipt_sdate" name="prom_receipt_sdate" class="form-control">
  <option value="">년도</option>
<c:forEach var="i" begin="2020" end="2030">
  <option value="${i}">${i}</option>
</c:forEach>
</select>
</span>년
 
<span>
<select id="prom_receipt_smonth" name="prom_receipt_smonth" class="form-control">
  <option value="">월</option>
<c:forEach var="i" begin="1" end="12">
  <option value="${i}">${i}</option>
</c:forEach>
</select>
</span>월
 
<span>
<select id="prom_receipt_sday" name="prom_receipt_sday" class="form-control">
  <option value="">일</option>
<c:forEach var="i" begin="1" end="31">
  <option value="${i}">${i}</option>
</c:forEach>
</select>
</span>일
 
<span>
<select id="prom_receipt_stime" name="prom_receipt_stime" class="form-control">
  <option value="">시</option>
<c:forEach var="i" begin="00" end="23">
  <option value="${i}">${i}</option>
</c:forEach>
</select>
</span>시
 
<span>
<select id="prom_receipt_sminute" name="prom_receipt_sminute" class="form-control">
  <option value="">분</option>
<c:forEach var="i" begin="00" end="59">
  <option value="${i}">${i}</option>
</c:forEach>
</select>
</span>분
</td>
</tr>
 
<input type="submit" id="Btn" value="<spring:message code="btn.save" text="저장" />" class="btn btn btn-primary btn-lg" />
</form>

 

 

 

JQUERY (제이쿼리)

 

• var을 통해 만든 변수에 id값을 넣어주고,
• 값을 넣을 컬럼(prom_rec_sdate)에 select id 항목들을 집어 넣습니다.
• hidden 값을 셋팅할 수 있도록 값을 넣을 컬럼(prom_rec_sdate)에 값을 넣습니다.

 

<script>
function _onSubmit(){
 
 var prom_receipt_sdate =$("#prom_receipt_sdate").val();
 var prom_receipt_smonth =$("#prom_receipt_smonth").val();
 var prom_receipt_sday =$("#prom_receipt_sday").val();
 var prom_receipt_stime =$("#prom_receipt_stime").val();
 var prom_receipt_sminute =$("#prom_receipt_sminute").val();
 var prom_rec_sdate ="";
 
prom_rec_sdate = addZero(prom_receipt_sdate)+"-"+addZero(prom_receipt_smonth)+"-"+addZero(prom_receipt_sday)+" "+addZero(prom_receipt_stime)+":"+addZero(prom_receipt_sminute);
 
$("#prom_rec_sdate").val(prom_rec_sdate);  //hidden value set   
</script>

 

이해가 잘 안되시면 댓글 남겨주세요 :)