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 shows one solution to solving the challenges.
This video doesn't have any notes.
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
Welcome back, how did it go?
0:00
Were you able to find a solution for
both of these challenges?
0:03
If not, that's okay.
0:06
You can watch my solution and
then go back and try it again.
0:08
Let's see how I approach this.
0:12
So for steps one and two, I used
a querySelector targeting each select
0:15
menu's ID property and
named them animalSelect and breedSelect.
0:20
For step three,
I used a querySelector all and
0:26
targeted all option elements that
have a data breed attribute.
0:29
Which as we can see in index.html,
are only the dog and cat breeds,
0:33
not the hidden ones at the top, perfect.
0:38
To start tackling the first challenge
of only showing matching breedOptions,
0:42
we needed to add an event listener on
our animalSelect element listening for
0:46
the change event.
0:50
Inside, we need to loop
over our breedOptions.
0:52
So I started a for loop here to
the length of our breedOptions variable.
0:55
We then needed a conditional to check if
the breedOption we're currently looping
1:00
over's data-breed value is not
the same as the animalSelect's value.
1:04
You could have instead checked if they
were equal and reverse the code below and
1:09
that would be perfectly fine.
1:13
If they are not equal,
1:15
I set the hidden attribute on
the option to true using dot notation.
1:17
To ensure that options that may have been
previously set as hidden will reappear
1:22
if the animal changes again, I set
hidden to false in the else statement.
1:27
Lines 23 and
26 here weren't part of the challenge.
1:31
But as a bonus, I've also added
the disabled attribute in these for
1:35
browsers like Safari,
as I mentioned in the previous video.
1:39
Great job if you thought of this too.
1:43
All right, let's test this out.
1:46
I'll choose Dogs here.
1:48
And now when I open the breeds drop
down menu, we only see dog options.
1:50
Great, I'll choose one and
change the animal to Cats.
1:55
If I open the breeds drop down again,
we only see cats.
2:00
So it looks like the first issue is
solved, let's take care of the second one.
2:04
This one can actually be quite simple.
2:10
Any time the animal selects
change event is triggered,
2:13
we can change the value of
the breeds Select Menu.
2:16
We can see that the second breed
option has a value of reselect.
2:20
This is the one I'd like to change it to,
2:25
as it tells the user to
please choose again.
2:27
So back in our event listener,
after the loop I've used dot notation to
2:31
assign the breedSelect's value
to the string of reselect.
2:36
I'm not gonna add the conditional
in step nine yet,
2:40
just to demonstrate to you why we need it.
2:43
Let's see how this currently
behaves in the browser.
2:46
I'll select Dogs, and
right away it changes.
2:50
Which seems a bit strange because
we haven't selected a breed yet
2:53
and it's saying to please choose again.
2:57
Let's continue for now though.
3:00
I'll select a breed,
then I'll change the animal again.
3:02
And cool, it's still working.
3:05
So how do we make sure we only change
to this reselect value if the user
3:08
has already chosen a breed?
3:12
That's what step nine is there for.
3:13
If we look at our
breedSelect element again,
3:16
we see that the default option
has a value of an empty string.
3:18
So in our event listener, we just
want to add a conditional statement,
3:23
checking if the breedSelect's value
is not equal to an empty string.
3:26
Meaning the user has
previously made a selection.
3:31
If that's true, we wanna set its
value to the string of reselect.
3:34
Let's test this out.
3:40
I'll choose Cats up top.
3:42
No changes below yet, that's good.
3:43
Then I'll choose a cat breed option.
3:46
Now when I change the animal to Dogs,
3:49
we can see the breed
option changes correctly.
3:51
Just to be extra sure, I'll select
a dog breed and change back to cats.
3:55
It changed this time as well, perfect.
4:00
That solves our second issue.
4:03
With such a small amount of code,
we've done so much.
4:05
We've improved the user experience and
streamline the selection process by
4:09
simplifying it and
only presenting the correct options.
4:13
We've also prevented many
potential errors where animals and
4:17
breeds don't match when
the user submits the form.
4:20
Was your solution different from mine?
4:24
If so, that's okay,
4:27
there's always more than one way to
find a solution when programming.
4:28
I hope this exercise was helpful for you.
4:32
We'll see you next time, and
until then, happy coding.
4:35
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