.change() 메서드

jQuery 2016. 4. 24. 16:56

728x90
반응형

원본 링크.




이 함수는 .bind('change', handler)을 줄여 놓은 것,

.trigger('change') 로 change 이벤트를 발생


change 이벤트는 요소(element)의 값이 변경될 때 발생,

원래, 이 이벤트는 <input><textarea><select> 와 같은 폼 요소 전용,

select, checkbox, radio 버튼들을 마우스로 선택하여 상태값을 바꾸는 즉시 이벤트가 발생하지만, 그 외의 다른 요소들은 값을 변경하고 포커스를 잃을 때 이벤트가 발생





예 제  
select에서 선택한 값들을 div에 표시합니다. ctrl + click으로 다중 선택해보세요.

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
<!DOCTYPE html>
<html lang="ko">
<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>
cs




미리보기


반응형

댓글 0