2021-06-20
웹 애플리케이션 내부에서 카테고리를 부여하는 경우 select 태그를 사용하는 경우가 있는데, 이러한 경우 어떻게 자바스크립트에서 해당 select 태그 중 선택된 option의 값을 체크하고 가져오는지를 알아보자.
- 예제
아래는 게시판의 카테고리를 설정하는 html select태그이다. 해당 카테고리를 사용자가 변경할 때마다 changeSelect() 함수를 호출하게 되는데, 이 함수에 따라 각 게시판의 링크로 이동하게 된다.
<select id= "category" name="category" onchange="chageSelect()">
<option value="X" selected="selected" style="background-color: #ccc">카테고리</option>
<option value="F" >자유게시판</option>
<option value="T" >치료게시판</option>
<option value="R" >리뷰게시판</option>
</select>아래는 자바스크립트 changeSelect() 함수 코드이다.
<script type="text/javascript">
function chageSelect(){
var selectList = document.getElementById("category")
if(selectList.options[selectList.selectedIndex].value == "F"){
location.href = "/board/list?bType=F";
}
if(selectList.options[selectList.selectedIndex].value == "T"){
location.href = "/board/list?bType=T";
}
if(selectList.options[selectList.selectedIndex].value == "R"){
location.href = "/board/list?bType=R";
}
}
</script>
함수를 보면 우선적으로 document.getElementById 를 통해 전체 select id를 추출해 변수로 선언해 준다. 이후 if 조건 문을 통해 현재 select가 어떠한 옵션을 선택했는지 확인하며, 확인 후 해당 카테고리 리스트로 보내주는 코드이다.(bType 은 게시판 카테고리의 줄임말이다. 파라미터명은 본인 원하는 것으로 자유롭게 변경하면 된다.) 변수로 선언한 selectList.option [selectList.selectIndex]. value로 현재 선택된 인덱스의 값을 체크하며, 해당 인덱스에 따라 원하는 게시판 카테고리 링크(location.href="링크")로 이동시킨다.
메인 이미지 출처: Photo by Josh Carter on Unsplash