Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 2

Nathan Parker
Nathan Parker
2,432 Points
Posted by Nathan Parker
Nathan Parker
2,432 Points

Why does button click get $select's value?

Hi, Treehouse community!

I am very confused on the last bit here. From 1:30 - 2:20 in the video, I become quite lost.

How does 'window.location = $select.val()' work if $select never directly received the value, but rather $option received the value in the .each method/function? If I use $option.val() to GET the value of option, $option is not defined because it is outside of it's original scope of the function, but that would seem to make more sense. I would also think that we should have to do a secondary step to traverse from setting $option's value to be $select's value (because $option is a child of $select) before trying to GET the value of $select with that button click function.

Thoughts?

Thank you SO MUCH in advance...

Cheers,

Nathan

Alex Hernandez
Alex Hernandez
Courses Plus Student 1,936 Points

The val of the select element is the option's selected value. Here is the JQuery docs. https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

2 Answers

Tommy May
Tommy May
12,056 Points
Tommy May
Tommy May
12,056 Points

Hi Nathan,

You are correct in saying that $option received the value in the function, but look closely at line 19 at the end of the video. This line is appending $option to $select so you end up with something like this after you iterate through the .each(). 

<select>
    <option value="index.html">Home</option>
    <option value="about.html">About</option>
    <option value="contact.html">Contact</option>
    <option value="support.html">Support</option>
    <option value="faqs.html">FAQs</option>
    <option value="events.html">Events</option>
</select>

Ignore the order of the options as I did not pay attention.

Now with this structure laid out for you think about what the select element does. The select element returns the value of the option that is selected. So when we say window.location = $select.val() we are redirecting the window to the value of the the option inside the select.

I think the main thing to understand is the select element returns the value of the option that is selected. Hope this helps!

john larson
john larson
16,594 Points

Tommy, you have a "easy to understand ", way of explaining things

Isabella Tan Hui Huang
Isabella Tan Hui Huang
3,577 Points
Isabella Tan Hui Huang
Isabella Tan Hui Huang
3,577 Points 
//Basically, this...
window.location= $select.val();
//Is the same as this...
window.location= $("select option:selected").val();

The getter variant of the .val() method gets the value of the option that is selected within the <select> element. That's just the way it works: Get value of selected option

In the second to last video of this series it's explained that "selected" is a special boolean property of the option element.