Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

I'm a little (a lot) foggy on how this code is making the text in the menu bar change

if($anchor.parent().hasClass("selected")){
    $option.prop("selected", true);
  };

it looks like it's saying that is the parent element has the class selected then it's property will be true. But isn't it already true if it has that class? (I get that .selected and selected true are separate things) I don't see how this changes the text in the menu bar.
Here's the rest of the code.

var $select = $("<select></select>"); /* create select */
$("#menu").append($select); /* append select */

$("#menu a").each(function(){ /* iterate over a */
  var $anchor = $(this); /* store a */
  var $option = $("<option></option>"); /* create option in fn */
  if($anchor.parent().hasClass("selected")){
    $option.prop("selected", true);
  };
  $option.val($anchor.attr("href")); /* set option val, href of a */
  $option.text($anchor.text()); /* option text = a text */
  $select.append($option); /* add option to select */
});

$button = $("<button>Go</button>"); /* create button */
$("#menu").append($button); /* add button */

$($button).click(function(){ /* bind click */
  window.location = $select.val(); /* set win local w/ select  val */
})


//html
// <div id="menu">
//   <ul>
//     <li class="selected"><a href="index.html">Home</a></li>
//     <li><a href="about.html">About</a></li>
//     <li><a href="contact.html">Contact</a></li>
//     <li><a href="support.html">Support</a></li>
//     <li><a href="faqs.html">FAQs</a></li>
//     <li><a href="events.html">Events</a></li>
//   </ul>
// 
// </div>

//select menu we dynamically add in
// <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>

Thinking about how to ask the question better. In the html, only one li has the class selected. So wouldn't the code

if($anchor.parent().hasClass("selected")){
    $option.prop("selected", true);

only be TRUE for that one element? But it changes the text for all the options.

3 Answers

John Coolidge
John Coolidge
12,614 Points

If you rewatch the video from about 11:20 onward you'll see that Andrew explains when you use the select box to traverse to a new page, say the About page for example, without the addition of the above code snippet, the select box will show the word "Home" in it even tho you are not on the Home page. The code above will turn the selected property to true in order that the select box show the name of the page you are on. Try and take out that bit of code and traverse from page to page. You'll notice that the select box will always say "Home" on the top. Now add that bit of code in again and traverse from page to page. Now the page title will only say "Home" when you're on the home page and it will say "About" when you're on the about page, etc.

When you move from page to page with the browser maximized, you'll notice the background color of the <li> change when you click on Home or About or FAQ. That's because the JavaScript has the "selected" class added to the new <li> that corresponds with the page you are on (and the CSS changes the background accordingly). What that bit of code above does is keep tabs on that "selected" class attached to the list of <li> tags. When the "selected" class moves from Home to About, that code snippet will move the option tag's selected property to match the <li> class's movement. In this case, Home option's selected property will become false/return to default and the About option's selected property will become true.

Does that make more sense?

John Coolidge
John Coolidge
12,614 Points

John Larson,

You are correct, there should only be one <li> with the class "selected". I don't have my own work in front of me at the moment, but if I recall, when you set an option's selected property to true, you are asking that that option value be displayed in the select tag. It isn't going to change the text at all. It's just showing that option in the select tag so that your site visitors can see what page they are currently on. Otherwise they have to use the content of the current page to guess. They might have selected the wrong choice by accident and assume they're on the FAQ page when they accidently selected the About page (and then assume that you don't know how to put together a proper FAQ page).

I hope that's clear and makes sense. If not, please let me know.

John

This line of code (I'm pretty sure) is the one that makes the menu bar show the right text for the page. Though based on your answer (which I may or may not understand) I don't see how that is happening.

if($anchor.parent().hasClass("selected")){
    $option.prop("selected", true);
  };

It's ever so slightly less foggy. Thanks for your help. I found this: 'that bit of code above does is keep tabs on that "selected" class attached to the list of <li> tags. When the "selected" class moves from Home to About, that code snippet will move the option tag's selected property to match the <li> class's movement".; Particularly enlightening. Sometimes Andrew says stuff and I don't quite get it. I don't recall that bit of logic from the video (I watched that part several times). So the way you presented it here...just clicked. Thanks.