[Jquery] 제이쿼리 change 이벤트 사용방법 & 예제, change 이벤트 소스코드로 정리와 설명

안녕하세요.

오늘은 제이쿼리(Jquery) change()에 대해서 알아보겠습니다.

- change 이벤트란?

제이쿼리 change 이벤트의 경우 셀렉터를 정하여 해당 셀렉터의 값이 변할경우 변화를 캐치하는 이벤트입니다.

- 소스코드

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

 
<html>
    <head>
        <script>
            
            alert($(this).val());
 
            // 제이쿼리 change 함수
            $("#testChange").change(function(){
                // 변경된 값으로 비교 후 alert 표출
                if($(this).val() == ""){
                    alert("저의 이름은 길길동 입니다.");
                } else if($(this).val() == "홍길동"){
                    alert("저는 "+$(this).val()+"입니다.");
                } else if($(this).val() == "최철수"){
                    alert("저는 "+$(this).val()+"입니다.");
                } else if($(this).val() == "나길동"){
                    alert("저는 "+$(this).val()+"입니다.");
                }
            });
            
        </script>
    </head>
    <body>
        <select id="testChange">
            <option value="">김길동</option>
            <option value="홍길동">홍길동</option>
            <option value="최철수">최철수</option>
            <option value="나길동">나길동</option>
        </select>
    </body>
</html>
 
 

- 소스 설명

Line23 : 셀렉트박스에 id를 정의 합니다.

Line6 : 셀렉트박스의 id에 change() 이벤트를 명시 해줍니다.

Line9 : $(this).val()를 사용하여 해당 오브젝트의 옵션값을 가져옵니다.

Line11 :if()문을 이용하여 해당 오브젝트의 값을 비교하여 값을 표출합니다.

- 글을 마치며

오늘은 제이쿼리 change 이벤트에 대해서 알아봤습니다. 상당히 간단하면서도 자주 쓰이게 되는 이벤트이기 때문에 미리 공부 해두시면 좋을거 같습니다.

감사합니다.

- 추천글

[Java] 자바 Map, HashMap 사용법 & 예제 (간단)

안녕하세요. 오늘은 자바(Java) Map에 대해서 알아보겠습니다. Map 인터페이스는 (key : value)형식의 저장 방식을 사용하고 있습니다. Key의 경우는 값을 저장하고 가져오기 위한 유일한 열쇠이며 Value의 경우는..

dion-ko.tistory.com

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

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

dion-ko.tistory.com

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

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

dion-ko.tistory.com

저작자표시 비영리

'JavaScript' 카테고리의 다른 글

[ Jquery ] 제이쿼리 실시간 검색어 자동완성 ajax 통신 방법 & 예제 (2)	2020.04.03
[Javascript] 자바스크립트 while()문 사용방법 & 예제, 반복문 빠져 나오는 방법 (0)	2020.03.23
[Javascript] 자바스크립트 onchange() 사용법 & 예제 (데이터 가져오기 포함) (0)	2020.02.26
[Jquery] 제이쿼리 텍스트(문자열) 변경 실시간 감지방법 설명(간단) (0)	2020.02.19
[Jquery] 제이쿼리 텍스트 변경 .text() .html() (예제포함) (0)	2020.02.19