HTML <Select> 태그 사용법

<select> 태그를 이용하여 우리가 손쉽게 SelectBox를 웹페이지상에서 표현해줄수 있다.

 

<td>카테고리</td>
			<td>
				<select>
					<option value="의류">의류</option>
					<option value="침구">침구</option>
					<option value="가구">가구</option>
				</select>
			</td>

카테고리 의류 침구 가구

 

이런식으로 select box를 생성하여 각각의 옵션에 value값을 설정해주면, 사용자가 선택했을때의 해당 value값을 추출하여 코드를 활용할수있다.

 

이때 사용하는 속성이 onchange이다. onchange는 select 요소의 값이 변경될때마다 호출되는 Javascript 이벤트 속성이다.

 

반응형

<td>카테고리</td>
			<td>
				<select onchange="checked(this.value)" id="firstCategory">
					<option value="의류">의류</option>
					<option value="침구">침구</option>
					<option value="가구">가구</option>
				</select>
			</td>
<script>
function checked(selectValue) {
	
	if(selectValue == '의류') {
		alert('의류가 선택되었습니다');	
		
		
		
	}
}
</script>

카테고리 의류 침구 가구

이런식으로 onchange를 이용하여 함수를 호출 하고 매개변수 this.value를 이용하여 셀렉트박스의 옵션 value값들을 전달해준다.

 

this.value에서 this는 이벤트가 발생한 요소( 즉 여기서는 select 태그 ) 를 의미하며, .value는 select 박스의 value 즉

옵션의 값을 의미한다.

 

따라서 코드 해석을 해보자면 의류를 클릭했을때 의류의 value인 "의류"가 함수의 매개변수로 전달된다.