select 박스 value 값 가져오기 :: onchange

웹페이지를 만들다보면 select 박스를 사용할 일이 굉장히 많다.

select 박스를 선택했을때 선택한 값을 가져오는방법을 간단히 정리해 보았다.

맨날 헷갈려서..

간단한 예로 셀렉트 박스를 선택할때마다 input 박스 값을 변경하는 소스

<!-- jsp/html 소스 -->
<input type="text" id="changeInput"/>
<select id="changeTest" onchange="selectBoxChange(this.value);">
  <option value="봄">봄</option>
  <option value="여름">여름</option>
  <option value="가을">가을</option>
  <option value="겨울">겨울</option>
</select>

위와 같이 셀렉트 박스를 만들고 option값을 변경할때마다 원하는 값을 구해오는방법은 매우간단하다.

 

1. select box에 onchange 함수를 사용한다.

위와 같이 onchange 함수를 사용해서 this.value 값을 넘겨주면 option에 value 값을 바로 구해 올 수 있다.

//jquery 소스
var selectBoxChange = function(value){
	console.log("값변경테스트: " + value);
	$("#changeInput").val(value);
}

위와같이 value 값을 받아와서 input박스에 받아온 소스를 넣으면 쉽게 input 박스 값도 변경 가능하다.

변경된 input 박스값

콘솔로그 이미지

위와 같이 값이 변경되는것을 확인할수 있다.

2. jquery.change() 함수 사용 

$(document).ready(function(){
	$("#changeTest").change(function(){
		console.log("값변경테스트: " + $(this).val());
		$("#changeInput").val($(this).val());

	});
 });

jquery에 change() 함수를 사용해서도 값을 변경할수있다.

jquery의 change() 함수를 사용할경우에는 select 박스에 있는 onchange() 부분 소스는 제거하고 사용하면 된다.