.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 |
미리보기
반응형
'jQuery' 카테고리의 다른 글
| 제이쿼리 플러그인 만들기 (0) | 2017.08.28 |
|---|---|
| [자바스크립트, 제이쿼리] onload와 (function(){...}, $(document).ready(function){ ... }; 의 차이 (0) | 2015.06.30 |
| event.target 이벤트가 발생된 요소 찾기 (0) | 2015.05.13 |
| 길이 값을 구하는 메서드들 width, innerWidth, outerWidth (0) | 2015.05.08 |
| .attr() 메서드와 .prop() 메서드 (0) | 2015.05.05 |