정리jQuery

jQuery API 살펴보기 change() 메서드

change, jQuery

선택된 요소의 값을 변경해주는 jQuery change() 메서드이다.

change 이벤트는 값이 변경되면 요소로 보내집니다. 이 이벤트는 input 요소, textarea 상자 및 select 요소로 제한된다. 선택 상자, 체크 상자 및 라디오 단추의 경우 사용자가 마우스로 선택하면 이벤트가 즉시 발생하지만 다른 요소 유형의 경우 요소가 포커스를 잃을 때까지 이벤트가 연기됩니다.

예제

1
2
3
4
5
6
7
8
9
10
<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

이벤트 핸들러는 text input 과 select box 에 바인딩 될 수 있다.

1
2
3
$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

select option 중에 두번 째 옵션을 드롭다운에서 선택하면 alert 창이 나타난다.

text field 에 입력 값을 바꾸고 아무데나 클릭해도 change() 메서드가 실행되어서 alert 창이 나타난다.

그러나 아무 작업도 하지 않고 그냥 input field 가 focus를 잃으면 이벤트가 트리거 되지 않는다.

그럴 때 이벤트를 수동으로 트리거하려면 인수 없이 .change()를 적용하면 된다.

1
2
3
$( "#other" ).click(function() {
  $( ".target" ).change();
});

실제로 테스트 해보면 이해할 수 있다.

alert이 두번 실행되는 이유는 .target 클래스가 2개 있고 2번 이벤트를 타기 때문이다.

아래 예제는 select 된 option을 가져와서 div에 text로 나타낸다.

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
36
37
38
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>

<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>

</body>
</html>
Share