jQuery Tutorial
jQuery Effects
jQuery HTML/CSS
jQuery Form
- jquery-serialize()
- jquery-serializearray()
jQuery Events
jQuery Misc
jQuery Questions
Miscellaneous
- jquery-vs-angularjs
jQuery MCQ
- jquery-mcq
jQuery UI
- 50+-jquery-ui
Interview Questions
- jquery-questions

jQuery 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 elements, boxes and <select> elements. </p> <ul class="points"> <li><strong>For select boxes, checkboxes, and radio buttons</strong>: The event is fired immediately when the user makes a selection with the mouse.</li> <li><strong>For the other element types</strong>: The event is occurred when the field loses focus. </li> </ul> <p><strong>Syntax</strong>: </p> <div class="codeblock"> <textarea name="code" class="xml"> $(selector).change()

It triggers the change event for selected elements.

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.

<!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>  

Test it Now

Output:

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

<!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>

Test it Now

Output:

Next TopicjQuery submit()

← prev next →

jQuery Tutorial

jQuery Effects

jQuery HTML/CSS

jQuery Form

jQuery Events

jQuery Misc

jQuery Questions

Miscellaneous

jQuery MCQ

jQuery UI

Interview Questions

jQuery change()

Parameters of jQuery change() event

Example of jQuery change() event

Hot Tutorials

Contact US