jquery ajax event change

날짜: 



<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>
The event handler can be bound to the text input and the select box:
1
2
3



$( ".target" ).change(function() {







  alert( "Handler for .change() called." );







});
Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, apply .change() without arguments:
1
2
3



$( "#other" ).click(function() {







  $( ".target" ).change();







});
After this code executes, clicks on Trigger the handler will also alert the message. The message will display twice, because the handler has been bound to the change event on both of the form elements.
As of jQuery 1.4, the change event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.

Examples:

Example: Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.

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="http://code.jquery.com/jquery-1.9.1.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>

댓글

댓글 쓰기