[HTML/JSP] Select Box 에 DB값 가져오기, 선택한 값을 DB에 저장하기

select box에 DB에 있는 값을 꺼내와 보여주고, 선택한 select box 의 값을 DB에 넣어 저장하기. 

먼말인지 알쥬...?

 

db 값을 select box 의 옵션으로 가져오기

왼쪽이 DB. DB값을 오른쪽의 셀렉트 박스로 가져오는 방법이다.

 

Controller

select box로 이동하는 컨트롤러에서, 가져올 DB값의 전체 검색 service를 실행한다. 나는 include 태그를 이용할거라 body에 담아줬다.

@GetMapping("/join")
	public String joinForm(ModelMap map) {
		ArrayList<IrangclassDto> list = classservice.getAll(); //전체검색 서비스 실행
		map.addAttribute("list",list);
		
		map.addAttribute("bodyview","/WEB-INF/views/teacher/join.jsp");
		return "index";
	}

 

 

 

jsp/html 페이지

select box가 있는 jsp/html 페이지에서 아래와 같이 코드를 적어준다. 포인트는, 받아온 map 의 forEach 문을 돌리면서 <option>의 value를 계속 출력해준다.

<c:out>은 데이터를 출력하기 위한 태그이다. XSS를 방어하기 위해 사용한다.

<div class="mb-3">
    <select id="inputState" class="form-control">
    	<option selected>학급</option>
       		<c:forEach var="cl" items = "${list }">
       		<option><c:out value="${cl.classname }"/>
      	 	</c:forEach>
    </select>
</div>

 

 

 

 

select box 에서 선택한 값을 DB에 저장하기

여기서 선택한 값을 db에 저장하기... 유남생? 

Vo에서 사용하는, 해당 select 값을 집어넣고자 하는 컬럼명을 name 으로 부여한다. (전체를 폼으로 감싸고 submit 해주기.)

option value 랑 c:out value 를 다르게 적은이유는, 

실제로 DB에 저장하고싶은 값이랑 select box 에서 보여주고 싶은 값이 달랐기 때문이다. <option value ..> 쪽에 넣은 값이 DB에 저장하고 싶은 값이고, 오른쪽 c:out 값이 select box 에서 보여주고 싶은 값이다.

<div class="mb-3">
    <select id="inputState" class="form-control"  name="classnum" >
    	<option selected>학급</option>
       		<c:forEach var="cl" items = "${list }">
       		<option value="<c:out value="${cl.classnum}"/>"><c:out value="${cl.classname }"/>
      	 	</c:forEach>
    </select>
</div>