Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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