Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Dynamic Select Menus!
You have completed Practice Dynamic Select Menus!
Preview
This video introduces the challenges to complete with this practice.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey everyone, Travis here and
it's time for some practice.
0:09
In this exercise, we're going to
manipulate the options of one select menu
0:13
based on the provided value of another,
using JavaScript.
0:18
This will enhance the user experience and
prevent potential errors.
0:22
Let's get started.
0:26
Go ahead and open the workspace
associated with this video, or
0:28
download the project files and
open them in your own text editor.
0:32
You'll see that we have index.html,
style.css,
0:36
and script.js files,
plus a folder of images.
0:41
You won't need to worry about anything
in the CSS or the images folder for
0:46
this exercise.
0:50
But of course, feel free to have some
fun with the styles after completing
0:51
the challenge if you'd like.
0:55
Let's open up the preview in the browser
and see what we're working with.
0:57
You'll see we have a very basic
form here with two select elements.
1:01
This first one is where users can select
whether they prefer cats or dogs.
1:05
Let's select cats.
1:11
This second select element is for the user
to select their favorite breed, and
1:13
here lies our first issue.
1:18
We should only be presented with breed
options that match our animal choice.
1:20
So in our case, we should only be able
to choose from cat breed options.
1:24
Currently, this allows the user
to provide invalid combinations.
1:30
But okay, let's choose a cat
breed here and, wait a second,
1:35
I totally forgot that I much
preferred dogs over cats, silly me.
1:39
I'm going to change my animal to dogs.
1:45
And here is our second issue.
1:47
When I already had a cat breed selected
then changed my animal to dogs,
1:50
the cat breed option is still selected.
1:54
This again leaves the potential for
invalid combinations, we'll want to
1:57
automatically change this breed select
menus value upon the animal changing.
2:02
All right,
let's take a look at index.html.
2:08
Here is our form element with
the two select element children.
2:13
Let's take a closer look
at these breed options.
2:17
First, is the default selected option.
2:20
It has the hidden attribute so
2:23
that users won't see it when
they open the drop-down menu.
2:25
I'm also using the disabled attribute
because with some browsers like Safari,
2:29
the hidden attribute doesn't quite work
the same as it does in Chrome for example.
2:34
Also notice that the value attribute
is equal to an empty string.
2:39
This will come in handy later on.
2:44
The second option is also hidden, and
has a value attribute equal to reselect.
2:47
This option will be very important
in the second part of this exercise.
2:54
The last six options are the dog and
cat breeds, and
2:59
notice they have this
breed data attribute.
3:01
This is going to be very useful in
the first part of this exercise.
3:05
At the bottom of the body element, I have
already linked the JavaScript file, so
3:09
you are all set there.
3:13
Let us jump over into script.js.
3:15
This is where you will
write all of your code.
3:18
I have laid out some code comments
here to guide you along the way.
3:21
Notice I've also indented the lines,
like pseudo-code,
3:25
so that you'll know if something
should be nested or not.
3:28
Down at the bottom is just some code for
validation purposes.
3:32
You won't have to work with or
worry about any of that.
3:36
Don't forget to console.log values, check
the teacher's notes for resources, and
3:40
test your work in
the browser along the way.
3:44
Good luck, have fun, and in the next
video I'll show you my solution.
3:48
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up