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

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

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points
Posted by Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

how does getting $select.val(), change the url of the page?

What i get it is that window.location is being changed and given the $select.val(); to get the selected page url.

But what does $select.val() gets? the value of its children <option value = "index.html"> ? if yes how does getting the value index.html change the entrie URL or location?

var $select = $("<select></select>");

$("#menu").append($select);

//Cycle over the menu links

$("#menu a").each(function(){
    var $anchor = $(this);
  //Create option element
    var $option = $("<option></option>");

   //options value is the href
    $option.val($anchor.attr("href"));

  //Set the option text === anchors text
    $option.text($anchor.text());

  //append to the select
    $select.append($option);
});

//Create a button
var $button = $("<button>Go</button>");

//Append it to menu
$("#menu").append($button);

//Bind click to button
$button.click(function(){
  window.location = $select.val();
});
Nir Frank
Nir Frank
3,578 Points

Hi Muhammad Haris Khan ! I was a little confused, so I checked it out myself! Apparently, the "selector" element returns the value of the selected "option"'s value. You can test it out yourself (like I did):

  1. Open the preview of the project
  2. Choose an option from the "select" box
  3. Open the JavaScript developer console
  4. Enter "$select.val();" and look at the result!

Each time you pick a different "option" from the "select" box, you'll see that the value returned by the "select" box matches the value we set for the selected "option" (in our case, we set it so it will be the "href" attribute from each list item in the unordered list in the menu).

3 Answers

Richard Johnson
Richard Johnson
7,264 Points
Richard Johnson
Richard Johnson
7,264 Points

If I understand this correctly, and it's my first go through with this, the $select.val() is getting the href of the selected option (i.e. the tab you select in the drop down menu we have created). In the first function we created, we set the value of each option to be the same as the href of the anchored list items. (//options value is the href $option.val($anchor.attr("href")))

Jason Arnold
Jason Arnold
22,110 Points
Jason Arnold
Jason Arnold
22,110 Points

$select is the drop-down menu on the page and $select.val() is the value that you choose from the drop down menu. When you click the "Go" button, the value that is in the drop down list is changed to the window.location.

If you navigate to the "Home" page, the window.location.href will point to the index.html file. You can see this in dev tools. When you change the drop down to say "FAQ"s (don't click "Go" yet) and look at select.val() in dev tools it will equal "faqs.html". When you click "Go", then the window location becomes "faqs.html" which is the html file of the FAQ page.

Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

you might want to use $select.text(); or $select.html(); to get the text from the select field then make sure is formated correctly then assing it to window.location.

this link may also help. https://developer.mozilla.org/en-US/docs/Web/API/Window.location

sibal gesekki
sibal gesekki
3,484 Points

useless