티스토리 뷰

HTML

Selection

Y.일월 2019. 9. 27. 09:59

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>

'HTML' 카테고리의 다른 글

style  (0) 2019.09.27
form  (0) 2019.09.27
SPA(Single Page Application)  (0) 2019.09.27
Onclick  (0) 2019.09.27
Array  (0) 2019.09.26
공지사항
최근에 올라온 글