티스토리 뷰
selection.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- DOM object method -->
<!-- 서버측으로 정보를 전달할 때 사용됨. -->
<form action="">
<select name="selectBox" id="selectBox">
<option value="대한">대한텍스트</option>
<option value="민국" selected>민국테스트</option>
<option value="만세">만세테스트</option>
</select>
</form>
<script type="text/javascript">
//변화시 이벤트 발생 change
//DOM 선택방법 : id, name, tag(select가 여러개 있는 경우), class(CSS의 클래스)
//주소로 지정.
var target = document.getElementById("selectBox");
alert('선택된 옵션 text 값=' + target.options[target.selectedIndex].text);
alert('선택된 옵션 value 값=' + target.options[target.selectedIndex].value);
//이벤트 : 객체에서 발생하는 신호.(GUI방식으로 프로그래밍할 때)
//일급객체 ->function이 클래스처럼 동작함.
//옵션을 변경 시킴-> change 이벤트 발생-> addEventListener로 change이벤트와 window를 연결 시킴 -> window에서 function 호출시킴.
//this = "selectBox" (객체 자기자신)
document.querySelector("#selectBox").addEventListener("change", function() { //함수로 전달
console.log(this);
alert('선택된 옵션 text 값=' + target.options[target.selectedIndex].text);
});
</script>
</body>
</html>