change()

jQuery change event occurs when the value of an element is changed. It works only on form fields. When the change event occurs, the change () method attaches a function with it to run.

Note: This event is limited to <input> elements, <textarea> boxes and <select> elements.

For select boxes, checkboxes, and radio buttons: The event is fired immediately when the user makes a selection with the mouse.
For the other element types: The event is occurred when the field loses focus.

Syntax:

snippet

$(selector).change()

It triggers the change event for selected elements.

snippet

$(selector).change(function)

It adds a function to the change event.

Parameters of jQuery change() event

Parameter	Description
Function	It is an optional parameter. It is used to specify the function to run when the change event occurs for the selected elements.

Example of jQuery change() event

Let's take an example to demonstrate jQuery change() event.

snippet

<!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 id="se" name="actors" >  
  <option>Uthappa</option>  
  <option selected="selected">Kattapa</option>  
  <option>Veerappa</option>  
  <option>Bahubali</option>  
  <option>Bhallal Dev</option>  
  <option>Awantika</option>  
</select>  
<div id="loc"></div>  
 <script>  
$( "select" ) .change(function () {  
document.getElementById("loc").innerHTML="You selected: "+document.getElementById("se").value;
});
</script>  
 </body>  
</html>

Output:

Let's see another example of jQuery change event where we are providing option to select multiple data using ctrl key.

snippet

<!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="Employees" multiple="multiple">
  <option>Uthappa</option>
  <option selected="selected">Kattapa</option>
  <option>Veerappa</option>
  <option selected="selected">Bahubali</option>
  <option>Bhallal Dev</option>
  <option>Awantika</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>

Output: