jQuery Tutorial - 34 - Change Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' org
with a video tutorial for the new Boston
in this video we're going to look at the
jQuery change event handler now in
previous parts of the tutorial set we've
looked at using the click event handler
for example however if we have elements
on a page such as a drop down list
you'll want to use the change event
handler to actually allow this event to
take place or the function inside of
this event to take place when a new
value has been selected for example so
the first thing I'm going to do is go
ahead and build a drop-down list so I'm
going to use the Select element and I'm
going to give this an ID of list now
inside of here I want to choose some
options that will be displayed in the
list and I'm going to give each of them
a value so the first value is going to
be one and I'll just write one in here
which is the text displayed to the user
this is the value that's returned I then
go ahead and just copy and paste this
down and change these values so we've
got one two and three and we'll just
change these accordingly so let's go
over to our page and refresh you can see
we've now got a drop-down box with one
two and three okay so what we want to do
now is create a page a javascript page
that we can include that it's going to
include the event handler for when this
list changes ie when someone clicks the
drop down list and then selects a new
value so whenever they click on a new
value here that's classed as the element
changing so let's go ahead and create
our new file I'm going to place this
inside my jquery folder with jquery jas
and i'm going to call this change j/s
okay so now I'm going to need to include
this change j/s file on my page so I'm
going to say script type is equal to
text forward slash
javascript the source is going to be Jay
s /jj s and then I'll end the script
there okay so now that we've done that
we should have functionality from this
change J s file and we can create an
event handler for when this list changes
so we're also going to go down here and
create a span and that's going to be the
feedback from what's being selected so
I'm going to call this list feedback so
inside this span we're going to create
some text that lets the user know what
they've selected from the list now this
isn't just useful for relaying what the
user selected obviously the user knows
what they've selected but let's say you
wanted to show another drop-down list
when a user had selected a particular
element in here or a particular option
from this list we can do that as well
we're not going to be looking in this
tutorial because I'm just demonstrating
the event handler however it is a
possibility and you will you will see
the methods that you can use to create
this for yourself so for now we're just
displaying the feedback from the user so
let's go ahead and reference the list
that'll be hash lists now we need to
create the event handler and this is
change so it's the dollar sign inside
brackets we textually represent that or
refer to this list using a hash then we
say dot change and we have parentheses
here and then a semicolon instead of
here we need to create a function with
our block which will then pull down and
we can start writing our code in here
now let's go ahead and just alert
something out and that's going to be
changed now what's going to happen is
when we actually change the list option
so when we choose a different option in
the list we'll get an alert box to show
that this has worked it's important that
we test that is worked before we
continue with the rest of our code so
I'm clicking on this but nothing's
happening however when I select a
different option from the list you'll
see that we get this alert box saying
changed as we specified
so now that we know it works we can
actually retrieve the value from here
and then relay it to the user
so I'm going to create a new file called
list value and that's going to be equal
to again we're referencing list up here
so we do exactly the same thing
hash lists and then dot Val which we've
spoken about in some of the other parts
of the tutorial this here is going to
retrieve the value here okay so for each
element or for each option okay so now
that we've got this list value we can
then go ahead and actually relay this to
the user so inside of and well by
referencing another element which is
list feedback we can say dot HTML and
then we can insert the list value so now
when we've well when jQuery has picked
up on this change we grab the current
value and then we relay it back to the
user using the HTML function which will
just put some value inside this list
feedback span okay so let's go ahead and
let's go ahead and test this in fact
beforehand I think we'll just add some
more text to here so you've you have
selected area so you have selected a
space an depending on the list value
okay just put a colon in there
okay so now let's go ahead and test this
so I'm going to choose two and it says
you have selected two I'm going to
choose three you have selected three and
then one you have selected one so you
can see with this change event handler
we can extremely easily check for the
change of different elements now this
doesn't have to just be used for lists
it can be used for a variety of elements
input fields text areas you know as many
elements as you can think that with that
would have some use in this event
handler so it's not just limited to this
select option element or the select
option at sorry the select element it
can be applied to
variety of other elements as well