Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Change Event in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 396
    Comment on it

    Change Event:

    Change event triggers when value of an element changes. It works only for form fields (<input>,<textarea> and <select> elements).

    • In case of select menu,checkboxes, and radio buttons change event occurs when user makes selection using mouse.
    • For other elements  change event occurs when the field loses focus.


    $(selector).change()  //it triggers change event for selected element
    $(selector).change(function) //attach a function to the change event(optional) 


    <!DOCTYPE html>    
    <html lang="en">    
      <meta charset="utf-8">    
      <title>change demo</title>
      <script src=""></script>      
      div {    
        color: brown;
      section{max-width:450px;margin:0 auto;border:1px solid grey;background:#5AB0A6;padding:40px;text-align:center;}
    <section class="container"> 
    <h2>Change Event Example</h2>
    <select id="option" name="actors" >    
      <option>Value #1</option>    
      <option selected="selected">Value #2</option>    
      <option>Value #3</option>    
      <option>Value #4</option>    
      <option>Value #5</option>    
      <option>Value #6</option>    
    <div id="content"></div>
    $( "select" ) .change(function () {    
    document.getElementById("content").innerHTML="Selected Value: "+document.getElementById("option").value;  

    In the above example when user will select an option then change event will trigger and it will show the selected value inside a div.

    You can check the output of above example here:

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: