Change Events - Detecting Drop Down Selections

Published on: April 15, 2018

Welcome to tutorial number 8 of the Easy jQuery series, part of We continue our exploration of events in jQuery by looking at the Change event. This tutorial will teach you how to detect change events and read the event to which the elemtnw as changed. 

The change event can be applied to HTML select elements, aka drop down lists, and read the option the user has selected. Opens up a lot of possibilities for you!

Detecting a change in dropdown options is as easy as the following snippet:

$("selector").on("change", callback);

To keep practicing with the .on() event method, we use his to detect a change event, instead of using .change() which is also completely valid!

I hope you enjoyed this tutorial! Please feel free to ask questions below or just leave your basic comments. 

To fork the fiddle and follow along:

Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!