[Javascript] 자바스크립트 onchange() 사용법 & 예제 (데이터 가져오기 포함)

안녕하세요.

오늘은 자바스크립트(Javascript) onchange() 이벤트에 대해서 알아보겠습니다. 자바스크립트 onchange의 용도는 셀렉트박스의 값이 변경될때 자주 사용됩니다. 셀렉트박스의 값이 변경될때 onchange() 이벤트에서 사용자가 지정한 함수를 호출하여 각각의 동작(스크립트)을 실행 시킵니다.

- 소스 설명

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

 
<html>
    <head>
        <script>
            
            // onchange에서 호출하는 함수. 
            function testChange(obj){
                // 'obj'는 this를 지칭하는 것입니다.
                alert($(obj).val());
                
                // 값 비교로 테스트 가능.
                if($(obj).val() == ""){
                    alert("값이 없습니다.");
                } else if($(obj).val() == "학생"){
                    alert("저는 학생입니다.");
                } else if($(obj).val() == "회사원"){
                    alert("저는 회사원입니다.");
                } else if($(obj).val() == "기타"){
                    alert("기타 직종입니다.");
                }
            }
            
        </script>
    </head>
    <body>
        <select onchange="testChange(this)">
            <option value="">직업선택</option>
            <option value="학생">학생</option>
            <option value="회사원">회사원</option>
            <option value="기타">기타</option>
        </select>
    </body>
</html>
 
 
 

- 소스 동작 순서

Line 26 : 셀렉트박스에 자바스크립트 onchange() 이벤트를 명시 후 testChange라는 함수를 선언합니다.

Line 7 : testChange라는 함수를 선언 한 후 개발자 입맛에 맞는 스크립트를 추가하여 사용합니다.

etc : 외적으로는 이해하기 쉽게 소스코드 안에 주석을 달아놔서 이해하시기 편할거 같습니다.

- 글을 마치며

오늘은 자바스크립트 onchange() 이벤트에 대해서 알아봤습니다. 개발을 하면서 상당히 자주 쓰이는 이벤트라 기본적으로 공부해두시면 상당히 좋을거 같습니다.

감사합니다.

- 추천글

[Jquery] 제이쿼리 텍스트(문자열) 변경 실시간 감지방법 설명(간단)

안녕하세요. 현재 onchage()를 이용해서는 text나 textarea의 경우에는 값을 적고 있는 시점에는 값의 변경을 감지하지 못합니다. (foucs out일 경우는 체크) 그리하여 오늘은 input 타입 text에서 문자열이 변경..

dion-ko.tistory.com

[Jquery] 제이쿼리 텍스트 변경 .text() .html() (예제포함)

안녕하세요. 오늘은 제이쿼리(Jquery) text(), html() 이벤트에 대해서 알아보겠습니다. 저희가 웹 개발을 하면서 상당히 자주 쓰이게 되는 이벤트 입니다. - text()란? text()이벤트란 $(셀렉터).text() 셀렉터의..

dion-ko.tistory.com

[DB] DDL, DML, DCL, TCL 이란? (기초)

안녕하세요. 오늘은 데이터베이스(Database Language)의 DDL, DML, DCL, TCL에 대해서 알아 보겠습니다. - 설명 1. DDL(Data Definition Language) - 정의 : 테이블의 생성, 수정, 삭제, 초기화 등을 행하는 정의..

dion-ko.tistory.com

저작자표시 비영리

'JavaScript' 카테고리의 다른 글

[Javascript] 자바스크립트 while()문 사용방법 & 예제, 반복문 빠져 나오는 방법 (0)	2020.03.23
[Jquery] 제이쿼리 change 이벤트 사용방법 & 예제, change 이벤트 소스코드로 정리와 설명 (0)	2020.02.27
[Jquery] 제이쿼리 텍스트(문자열) 변경 실시간 감지방법 설명(간단) (0)	2020.02.19
[Jquery] 제이쿼리 텍스트 변경 .text() .html() (예제포함) (0)	2020.02.19
[Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단) (1)	2020.02.14