(jQuery) 파라미터값 받아서 특정 select option값 selected하기

스프링 수업을 듣다보니 하고 싶은 기능이 생겼다.

 

 

게시판이 총 3개가 있다. 각 게시판마다 글쓰기 기능이 있다.

 

 

대충 이런식으로 만들었다.

글쓰기 페이지로 넘어오면 글의 주제를 선택하는 select문과

제목을 기입하는 input영역, 내용을 입력하는 textarea영역이 있다.

여기서 나는

자유게시판에서 글쓰기를 누르면 select의 기본 option값은 자유게시판으로,

공지사항에서 글쓰기를 누르면 option의 value가 공지사항으로,

문의게시판을 누르면 option의 value가 문의게시판으로

글쓰기 페이지가 열렸으면 좋겠다는 생각을 갖고 바로 실행에 옮겼다.

 

 

 

결과는...??

성공적! 뿌듯하다. 물론 다른 주제로 변경할 수 있다.

 

뭔가 대단할 거 같으면서도 별거 없고, 별거 없을 거 같아보이면서도 좀 그런...

그런 기능이다 ㅎㅎ

 

방법은 간단했다.

(우선 나의 개발 환경은 JSP Spring 이며, 추가적으로 JSTL과 jQuery를 사용했다.)

우선 URL창에 파라미터값을 잘 보면 sb_cate=1 이라는 값이 넘어온 것을 알 수 있다.

 

 

<select name="sb_cate" id="selectCate">
  <option value="1">자유게시판</option>
  <option value="2">공지사항</option>
  <option value="3">문의게시판</option>
</select>

해당 카테고리의 번호를 넘어오게 했으므로 select의 option의 value값을 1, 2, 3으로 잡았다.

 

 

그 다음으로 해줄건 스크립트 작성이다.

저 파라미터 값으로 넘어온 숫자와 option의 value값이 같다면 selected되게 하면 끝이다.

$(function(){
	$("#selectCate").val("${param.sb_cate}").attr("selected","selected");
});

파라미터 값은 JSTL로 정말 간단하게 잡을 수 있어 편한거 같다 ㅎㅎ

 

그럼 페이지가 전환되어 글쓰기 페이지가 보이는 순간 selectCate의 value값 즉, option으로 지정해둔 value값과 sb_cate라는 파라미터값을 비교해서 selected를 attr로 붙여주는 스크립트를 사용할 수 있게 된 것이다.

 

한줄이면 끝난다니....

나중엔 option도 반복문으로 생성해서 코드량을 더 줄여봐야겠다.

아! 주의할 사항으로 JSTL과 jQuery를 사용하기 위해서는 taglib라던지 jQuery CDN이 있어야하니 잊지말고 연결 해놓자!