Trouble recreating this problem: jQuery Basics: build a mobile drop down menu

Question

I am basically having problems appending the $option to the $select as in $select.append($option); I get an error: Uncaught TypeError: undefined is not a function. whereas this is the way the instructor did it.

<html>
<head>
    <title>header page</title>
    <style type="text/css">
        .menu {
            display: none;
        }
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var $select = ("<select></select>");

        $(".mobile-menu").append($select);

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

            $option.val($anchor.attr('href'));
            $option.text($anchor.text());
            $select.append($option); //this is where the problem is 
        });
    });

    </script>
</head>
<body>

    <div class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Information</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact Us</a></li>
    </div>
    <div class="mobile-menu">

    </div>

</body>
</html>

Answer 1 · 2014-04-21T15:43:14Z

April 21, 2014 3:43pm

I'm not sure how it is in the video but it can't work like that. The reason you have this issue is not to do with the option variable it is that jQuery does not know what element to append the data to. Your $select variable is a string that happens to contain HTML mark up but this is not a valid selector.

For example the code below would target a select element inside any element with the class of .mobile-menu. Demo here.

$('.mobile-menu select').append($option);

Additionally you can drop the reference to mobile-menu and achieve the same result. I suspect this is the answer the challenge is looking for. Try wrapping parenthesis and '' around the word select in your code.

Answer 2 · 2014-04-21T15:57:53Z

April 21, 2014 3:57pm

The problem is you didn't put the "$" before "(<select></select)", which means that Javascript was treating it as a string and not a jQuery object. Appending to the select list to .menu worked because an html string is still html to the browser. However, in the each loop, $option is a jQuery object and you can't append an object to a string. That is why it was giving you an error.

Answer 3 · 2014-04-22T06:14:54Z

April 22, 2014 6:14am

Yep. This...

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

should be this....

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

I did the same thing.

Welcome to the Treehouse Community

Looking to learn something new?

Jeffrey Wambugu

Jeffrey Wambugu

Trouble recreating this problem: jQuery Basics: build a mobile drop down menu

3 Answers

Richard Duncan

Richard Duncan

Andrew Shook

Andrew Shook

Brian McNitt

Brian McNitt