Change Event Handler JQuery Essentials
In this lesson Change Event Handler JQuery Essentials we are gonna learn how to know the changed value of the currently selected value in the dropdown list. So here we use the change() event listener to handle this situation.
Here we are using the alert() function for check whether the change is working or not. So, lets jump into the lesson and how to make this as possible.
alert("You're Selected Something");
The above function is watching the id list and make sure there is any change is happening on the list. If any change is happening then it shows the alert box on the screen.
<meta charset="utf-8" />
<title>Change Event Handler JQuery Essentials</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<h2 class="text-center">Change Event Handler JQuery Essentials</h2>
<select name="changes" id="list" class="form-control">
The above shown code is the HTML elements we are using to achieve this functionalities. The change() is an one of the event handler which is very usefull in various functions.
The image above describes what is the result for the given script and the HTML file. It’ll just throws an alert box whatever we selected in the Dropdown list.
And now its time to add the essentials with this functionality is getting the option value of the selected option using functions and properties in JQuery framework.
var list_feedback = $("#list").val();
$("#selected_option").html("Congrats You're Selected " + list_feedback);
You can understand the script by the way it placing itself.
At very first we have to wait until the document has to be loads. And looking for an ID list, then change() event handler watches whether the options are changed or not.
And if the value is change then it gets the value of changed option in a variable called list_feedback.
After that we have to showcase the value in the HTML page. So, we’re using the html() function to append the value inside the HTML page.
And finally we can get results as follow.
The above image might have the evidence to how the function is working and this is the way how the change() event handler is working.
We hope this Change Event Handler JQuery Essentials lesson will give you some knowledge on change() event handlers in JQuery. And we’ll learn a lot more in the upcoming lessons.