Api jQuery on Change() Event Learn by Example

jQuery change()

The JQuery change () event occurs when the value of an element changes. It only works on the form fields. When the change event occurs, the change () method encloses a function to run.

For the selected menu, the change event occurs when an option is selected. For text field or text fields, the occurrence of change occurs when the field loses focus after the content changes.

Syntax

$(selector).change()

Trigger the change event for the selected elements:

$(selector).change(function)

Parameters of jQuery change()

ParameterDescription
FunctionOptional. Specifies the function to run when the change event occurs for the selected elements

Example of jQuery change() event

Let’s see an example with demonstrate jQuery change().

<!DOCTYPE html>    
<html lang="en">    
<head>    
  <meta charset="utf-8">    
  <title>Change Event Example</title>    
  <style>    
  div {    
    color: red;    
  }    
  </style>    
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>    
<body>    
 <select id="select_id" name="actors" >    
  <option>Test</option>    
  <option selected="selected">Java</option>    
  <option>Python</option>    
  <option>Ruby</option>    
  <option>PHP</option>    
  <option>Jquery</option>    
</select>    
<div id="location"></div>    
 <script>    
$( "select" ) .change(function () {    
document.getElementById("location").innerHTML="You selected: "+document.getElementById("select_id").value;  
});  
</script>    
 </body>    
</html>   
Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *