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

Posted by simon buysse
simon buysse
9,716 Points

Go straight to the <option>page from dropdown menu

I'm making a dropdown menu (following the mobile dropdown menu class in JavaScript basics) So we make a dropdown menu, creating an <option> for every original navigation item. the value of the <option>s are set to the href of the original navigation items. You can see this below.

My question is about the last piece of code, I want javascript to change the page as soon as we click one of the options. This does not happen with my code, but I wonder why. I also added a console.log statement, but this never executes. 

var $select = $("<select></select>");
$("#menu").append($select);
//Cycle over the original menu links
$("#menu a").each(function () {
  var $anchor = $(this);
  var $option = $("<option></option>");
  $option.val($anchor.attr("href"));
  $option.text($anchor.text());
  $select.append($option);
});

$("#menu option").click(function(){
  console.log("test");
  window.location = $(this).val();
});
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi simon buysse, just letting you know I had to play around a bit with the <option> tags in your question to get them to display properly.

HTML in Markdown gets outputted as the actual HTML, rather than being escaped, unless you format it as a code block.

simon buysse
simon buysse
9,716 Points

Hi Iain Simmons ! Thank you for the answer, but I'm not sure I get what you're saying... I thought it outputs just fine?

2 Answers

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi Simon,

Rather than a 'click' element on the option, you can check for 'change' on the select element.

$("#menu select").change(function(){
  console.log("test");
  window.location = $(this).val();
});
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Just be aware that keyboard events work differently across browsers (some you have to select an option then hit enter before it will fire the change event, others will do it as soon as a different option is selected).

simon buysse
simon buysse
9,716 Points
simon buysse
simon buysse
9,716 Points

Thank you damien! I found out about the change method, later in the javascript basics course, but I'm still wondering why my code doesn't work. To me the logic seems fine, If I click an option in the #menu, then the function should be executed. Simple logic, but seems to be faulty.

Damien Watson
Damien Watson
27,419 Points

I don't think it is faulty, I have searched a bit and every example of "click event on select option" I have found backs this up, I believe that the 'option' can't receive a click. The 'option' is a subset of the 'select' if you like and when you click the 'option', you are actually clicking the 'select' which changes to the item you clicked over.

This is my understanding anyway but as you said, the logic of applying a 'click' seems sound its just the 'option' element can't receive it.