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 Using change()

Karl Wills
Karl Wills
4,110 Points
Posted by Karl Wills
Karl Wills
4,110 Points

Oops! Looks like task 1 is no longer passing...

I'm not sure why my code is no longer passing, All I had to do was removed the line of code that appends the button to the select element and change the click event to change...

Can anyone see why this may be happening?

js/app.js 
//Problem: It look gross in smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation

//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);

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

  //Deal with selected options depending on current page
  if($anchor.parent().hasClass("selected")) {
    $option.prop("selected", true);
  }
  //option's value is the href
  $option.val($anchor.attr("href"));
  //option's text is the text of link
  $option.text($anchor.text());
  //append option to select
  $select.append($option);
});
//Create button 
var $button = $("<button>Go</button>");
//Bind click to button
$button.change(function() {
  // Go to select's location
  window.location = $select.val();
});
index.html 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <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>
    <h1>Home</h1>
    <p>This is the home page.</p>
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

3 Answers

miikis
miikis
44,957 Points

Hey Karl,

Task 2 asked you to do this:

"Now modify the $button click code so it now performs the redirect when the $select is changed."

All you have to do is bind that existing change event to $select instead of $button. Like so:

$select.change(function(){
  //Go to select's location
  window.location = $select.val();
});
Joe Hartman
Joe Hartman
20,881 Points
Joe Hartman
Joe Hartman
20,881 Points

Looks like you've taken out the button create event altogether. You still need to create a button, just not append it to the #menu div. By not appending it, it will float up to the side of the select menu. Just remove the .append method and remove the parentheses from the button variable.

Karl Wills
Karl Wills
4,110 Points
Karl Wills
Karl Wills
4,110 Points

doh! I see what i've done wrong! thanks both!