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.
Syntax:
$(selector).change() //it triggers change event for selected element
$(selector).change(function) //attach a function to the change event(optional)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>change demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
div {
color: brown;
margin-top:10px;
font-weight:bold;
}
section{max-width:450px;margin:0 auto;border:1px solid grey;background:#5AB0A6;padding:40px;text-align:center;}
</style>
</head>
<body>
<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>
</select>
<div id="content"></div>
</section>
<script>
$( "select" ) .change(function () {
document.getElementById("content").innerHTML="Selected Value: "+document.getElementById("option").value;
});
</script>
</body>
</html>
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: https://jsfiddle.net/h4tcyz7g/1/
0 Comment(s)